Wie sperre ich die vertikale Neigung eines Dreiecks mit FabricJS?

In diesem Tutorial erfahren Sie, wie Sie die vertikale Neigung eines Dreiecks mit FabricJS sperren. So wie wir die Position, Farbe, Deckkraft und Größe des dreieckigen Objekts auf der Leinwand festlegen können, können wir auch festlegen, ob die vertikale Neigung des Objekts gestoppt werden soll. Dies kann mit dem Attribut lockSkewingY erfolgen.

Syntax

 new Fabric.Triangle({ lockSkewingY : 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 wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Eigenschaft lockSkewingY ist.

< /ul>

Optionsschlüssel

• lockSkewingY – Diese Eigenschaft akzeptiert einen Boolean-Wert. Wenn wir ihm einen „wahren“ Wert zuweisen, wird die vertikale Neigung des Objekts gesperrt.

Beispiel 1

Standardverhalten eines Triangle-Objekts im Canvas

Sehen wir uns ein Codebeispiel an, um das Standardverhalten eines Triangle-Objekts zu verstehen, wenn die Eigenschaft lockSkewingY nicht verwendet wird. Sie können ein Objekt horizontal und vertikal neigen, indem Sie die Umschalttaste drücken und dann horizontal oder vertikal ziehen.

画布中 Triangle 对象的默认行为
您可以按 Shift 键并沿 X 轴或 Y 轴拖动边缘，以查看是否可以在两个方向上倾斜。


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

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

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

Nach dem Login kopieren

Beispiel 2

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

In diesem Beispiel sehen wir, wie die Eigenschaft lockSkewingY verwendet wird, um die vertikale Neigung eines Dreiecksobjekts zu verhindern . Wie wir sehen, können wir ein dreieckiges Objekt zwar horizontal neigen, vertikal dürfen wir den gleichen Vorgang jedoch nicht ausführen.

 






将 lockSkewingY 作为具有“true”值的键传递
您可以看到沿 y 轴倾斜不再可行


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

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

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

Nach dem Login kopieren

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