Wie sperre ich die vertikale Bewegung eines Dreiecks mit FabricJS?

In diesem Tutorial lernen wir, wie man die vertikale Bewegung eines Dreiecks mit FabricJS sperrt. So wie wir die Position, Farbe, Deckkraft und Größe eines Dreiecksobjekts auf der Leinwand festlegen können, können wir auch festlegen, ob es sich nur auf der X-Achse bewegen soll. Dies kann mit dem Attribut lockMovementY erfolgen.

Syntax

 new Fabric.Triangle({ lockMovementY: Boolean }: Object)

Parameter

• Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, für das lockMovementY ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

< /ul>

Optionstaste

• lockMovementY Diese Eigenschaft akzeptiert einen booleschen Wert. Wenn wir ihm einen „wahren“ Wert geben, kann sich das Objekt nicht mehr vertikal bewegen.

Beispiel 1

< strong>Standardverhalten des Dreiecksobjekts im Canvas

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie man ein Dreiecksobjekt frei auf der X- oder Y-Achse bewegt, wenn die Eigenschaft >lockMovementY nicht zugewiesen ist“ wahr " Wert.

画布中 Triangle 对象的默认行为
您可以选择三角形并将其拖动。请注意，您可以在水平和垂直方向上移动对象。


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#ffc1cc”，
笔划：“#fbaed2”，
笔划宽度：5，
});

// 将其添加到画布中
canvas.add(三角形);

Nach dem Login kopieren

Beispiel 2

Übergabe von lockMovementY als Schlüssel mit dem Wert „true“

In diesem Beispiel werden wir sehen, wie wir die vertikale Bewegung eines dreieckigen Objekts sperren können. Indem wir der Eigenschaft lockMovementY den Wert „wahr“ zuweisen, stoppen wir im Wesentlichen die vertikale Bewegung.

将 lockMovementY 作为具有“true”值的键传递
您可以选择并拖动三角形以查看不再允许在 y 方向上移动。


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#ffc1cc”，
笔划：“#fbaed2”，
笔划宽度：5，
锁定运动Y：true，
});

// 将其添加到画布中
canvas.add(三角形);

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie sperre ich die vertikale Bewegung eines Dreiecks mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!