Wie stelle ich den Neigungswinkel der x-Achse eines Rechtecks ​​mit FabricJS ein?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Neigungswinkel der x-Achse eines Rechtecks ​​festlegen. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und sie der Leinwand hinzufügen.

Unser rechteckiges Objekt kann auf viele Arten angepasst werden, z. B. durch Ändern seiner Abmessungen, Hinzufügen einer Hintergrundfarbe oder Ändern des Neigungswinkels auf der x-Achse. Wir können dies tun, indem wir das Attribut skewX verwenden.

Syntax

new Fabric.Rect({ skewX : Number }: Object )

Parameter

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

Optionstaste

• skewX – Diese Eigenschaft akzeptiert eine Zahl< /strong>, die den Neigungswinkel auf der X-Achse des Objekts bestimmt.

Beispiel 1

Wird angewendet, wenn die skewX-Eigenschaft nicht festgelegt ist.

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein rechteckiges Objekt angezeigt wird, wenn die skewX-Eigenschaft nicht angewendet wird. In diesem Fall erscheint unser rechteckiges Objekt in keinem Winkel geneigt.

未应用 skewX 属性时
可以看到默认情况下矩形上任何角度都没有倾斜


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：105，
顶部：70，
宽度：170，
身高：70，
填写：“#8f9779”，
笔画：“#8fbc8f”，
笔划宽度：9，
});

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

Beispiel 2
Übergeben Sie skewX als Schlüssel und weisen Sie ihm einen benutzerdefinierten Wert zu.

In diesem Beispiel sehen wir, wie man skewX einen numerischen Wert zuweist Eigentum. Der übergebene Wert bestimmt die Neigung entlang der X-Achse.

将 skewX 作为键传递并为其分配自定义值
您可以看到矩形在 X 轴上倾斜了 50 度角


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：105，
顶部：70，
宽度：170，
身高：70，
填写：“#8f9779”，
笔画：“#8fbc8f”，
笔划宽度：9，
偏斜X：50，
});

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

Das obige ist der detaillierte Inhalt vonWie stelle ich den Neigungswinkel der x-Achse eines Rechtecks ​​mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!