Wie stelle ich den Drehwinkel eines Rechtecks ​​mit FabricJS ein?

In diesem Tutorial legen wir den Drehwinkel eines Rechtecks ​​​​mit FabricJS fest. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Klasse fabric.Rect erstellen und sie der Leinwand hinzufügen. Die Eigenschaft

angle definiert den 2D-Rotationswinkel des Objekts in FabricJS. Wir haben auch die Eigenschaft „centeredRotation“, die es uns ermöglicht, den Mittelpunkt des Rechtecks ​​zu verwenden als Ursprung der Transformation.

Syntax

new Fabric.Rect({ angle: Number, centeredRotation: Boolean }: Object)

Parameter

• Optionen (optional) – Dieser Parameter ist ein Objekt, das unser Rechteck ist. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Rechteck beziehen, dessen Winkel und zentrierteRotation Eigenschaften sind.

Optionstaste

• Angle – Diese Eigenschaft akzeptiert eine angegebene Zahlden Drehwinkel des Rechtecks ​​in Grad.

• centeredRotation – Diese Eigenschaft akzeptiert einen booleschen-Wert, der bestimmt, ob die Mitte des Rechtecks ​​der Transformationsursprung ist.

Beispiel 1

Winkel als Schlüssel mit benutzerdefiniertem Wert übergeben und zentrierte Drehung des Rechtecks ​​deaktivieren

Sehen wir uns ein Codebeispiel an, um den Drehwinkel eines Rechtecks ​​in FabricJS festzulegen. Negative Winkel geben eine Richtung gegen den Uhrzeigersinn an, während positive Winkel eine Richtung im Uhrzeigersinn angeben. Da wir centeredRotation einen False-Wert zugewiesen haben, wird das Rechteck gedreht, während seine Ecken als Drehzentrum verwendet werden.

将角度作为带有自定义值的键并禁用矩形的居中旋转
旋转矩形可以看到其居中旋转已被禁用。


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：125，
顶部：90，
宽度：170，
身高：70，
填写：“#cf1020”，
居中旋转：假，
角度：15，
});

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

Beispiel 2

Zentrierte Drehung des Rechtecks ​​aktivieren

An diesem Beispiel können wir das erkennen, indem wir die Eigenschaft „centeredRotation“ auf „true“ setzen Das Rechteck verwendet nun seinen Mittelpunkt als Rotationszentrum. Vor Version 1.3.4, centeredScaling und centeredRotation sind in einem Paket namens enthalten centerTransform.

启用矩形的居中旋转
旋转矩形以查看已启用居中旋转。


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

// 初始化一个矩形对象
var 矩形 = 新的布料. 矩形({
左：125，
顶部：90，
宽度：170，
身高：70，
填写：“#cf1020”，
居中旋转：true，
角度：15，
});
   
// 将其添加到画布中
canvas.add(矩形);

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