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 Klasse fabric.Triangle erstellen 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 Attribut scaleX erfolgen.

Syntax

 new Fabric.Triangle({ scaleX : 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 ändern, die sich auf Objekte beziehen, deren scaleX ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

Optionsschlüssel

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

Beispiel 1

Standarddarstellung, wenn scaleX nicht verwendet wird

Sehen wir uns ein Codebeispiel an, das zeigt, wie ein Dreiecksobjekt aussieht, wenn die Eigenschaft scaleX nicht 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(三角形);

Beispiel 2

Übergabe des Attributs scaleX als Schlüssel

In diesem Beispiel übergeben wir das Attribut scaleX als 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(三角形);

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!