Wie sperre ich die vertikale Skalierung von Triangle mit FabricJS?

In diesem Tutorial lernen wir, wie man die vertikale Skalierung eines Dreiecks mit FabricJS sperrt. 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 Skalierung des Objekts gestoppt werden soll. Dies kann mit dem Attribut lockScalingY erfolgen.

Syntax

 new Fabric.Triangle({ lockScalingY : 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 lockScalingY ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

Option Key

• lockScalingY− Diese Eigenschaft akzeptiert einen booleschen Wert. Wenn wir ihm einen „wahren“ Wert zuweisen, wird die vertikale Skalierung 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 lockScalingY nicht verwendet wird. Es ist möglich, Objekte horizontal und vertikal zu skalieren.

画布中 Triangle 对象的默认行为
您可以在水平和垂直方向上缩放三角形，以验证是否可以在两个方向上缩放。


// 启动画布实例
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(三角形);

Beispiel 2

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

In diesem Beispiel sehen wir, wie die lockScalingY-Eigenschaft verwendet wird, um die Fähigkeit eines Triangle-Objekts zur vertikalen Skalierung zu stoppen. Wie wir sehen, können wir ein Dreiecksobjekt zwar horizontal skalieren, dürfen den gleichen Vorgang jedoch nicht vertikal ausführen.

 






将 lockScalingY 作为具有“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，
lockScalingY：true，
});

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

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