Wie stelle ich den horizontalen Skalierungsfaktor eines Dreiecks mit FabricJS ein?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den horizontalen Skalierungsfaktor eines Dreiecks festlegen. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Klassefabric.Triangleerstellen und sie der Leinwand hinzufügen.

So wie wir die Position, Farbe, Deckkraft und Größe des Dreiecksobjekts auf der Leinwand festlegen können, können wir auch die horizontale Skalierung des Dreiecksobjekts festlegen. Dies kann mit dem AttributscaleXerfolgen.

Syntax

new Fabric.Triangle({ scaleX : Number }: Object)

Parameter

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

< /ul>

Optionsschlüssel

• scaleX– Diese Eigenschaft akzeptiert einennumerischenWert. Der zugewiesene Wert bestimmt den horizontalen Objektskalierungsfaktor. Der Standardwert ist 1.

Beispiel 1

Standarddarstellung, wennscaleXnicht verwendet wird

Sehen wir uns ein Codebeispiel an, das zeigt, wie ein Dreiecksobjekt aussieht, wenn die EigenschaftscaleXnicht verwendet wird. Standardmäßig haben Dreiecksobjekte einen horizontalen Skalierungsfaktor von 1. ScaleX bestimmt die Transformation, die die Größe des Objekts entlang der X-Achse ändert.

不使用scaleX时的默认外观 您可以看到沿 x 轴没有调整大小 // 启动画布实例 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 des AttributsscaleXals Schlüssel

In diesem Beispiel übergeben wir das AttributscaleXals Schlüssel mit dem Wert 2. Dies bedeutet, dass der Skalierungsfaktor des dreieckigen Objekts in horizontaler Richtung verdoppelt wird.

将scaleX属性作为键传递 请注意，对象的水平宽度现在已加倍 // 启动画布实例 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， 规模X：2， }); // 将其添加到画布中 canvas.add(三角形);

Nach dem Login kopieren

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