Wie stelle ich die Breite eines Dreiecks mit FabricJS ein?

In diesem Tutorial lernen wir, wie man mit FabricJS die Breite 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({ width: Number }: Object)

Parameter

Optionen (optional)

Dieser Parameter ist ein
• Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter ist es möglich, Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften zu ändern, die sich auf das Objekt beziehen, für das width ein Attribut ist. Optionsschlüssel
Width
– Diese Eigenschaft akzeptiert einen
• Zahlenwert

  , mit dem wir die Breite des Objekts angeben können. Der Standardwert ist 100. Beispiel 1

width

Standardverhalten der Eigenschaft „Breite“

Sehen wir uns ein Codebeispiel an, um das Standardverhalten der Eigenschaft „Breite“ zu verstehen.

宽度属性的默认行为
可以看到三角形的宽度默认为100


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：60，
顶部：50，
填写：“#b0e0e6”，
身高：90，
});

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

Beispiel 2
Übergabe des Attributs

width

als Schlüssel

Da wir nun dem Attribut width einen Wert von 180 Pixel zugewiesen haben, können wir sehen, wie sich seine Breite ändert.

 






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


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：60，
顶部：50，
填写：“#b0e0e6”，
身高：90，
宽度：180，
});

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

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