Wie stelle ich die Höhe eines Dreiecks mit FabricJS ein?

In diesem Tutorial lernen wir, wie man mit FabricJS die Höhe eines Dreiecks festlegt. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen.

Wir können das Dreiecksobjekt manipulieren, indem wir seine Position, Deckkraft, Kontur und Größe ändern. Mit FabricJS können wir die Größe von Objekten mithilfe der Eigenschaften width und height steuern.

Syntax

new Fabric.Triangle({ height: Number }: 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 Höhe die Eigenschaft ist.

Optionsschlüssel

• Height – Diese Eigenschaft akzeptiert einen Zahlenwert, mit dem wir die Höhe des Objekts angeben können. Der Standardwert ist 100.

Beispiel 1

heightStandardverhalten der Eigenschaft

Sehen wir uns ein Codebeispiel an, um das Standardverhalten der Eigenschaft height zu verstehen.

高度属性的默认行为
请注意，默认三角形的高度为 100。


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

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

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

Beispiel 2

Übergabe des Attributs height als Schlüssel

Da wir nun dem Attribut height einen Wert von 140 Pixel zugewiesen haben, können wir seine Höhenänderung sehen.

 






将高度属性作为键传递
您可以看到三角形的高度现在固定为 140。


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

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

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

Das obige ist der detaillierte Inhalt vonWie stelle ich die Höhe eines Dreiecks mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!