Wie stelle ich den Drehwinkel eines Dreiecks mit FabricJS ein?

In diesem Tutorial legen wir den Drehwinkel eines Dreiecks mit FabricJS fest. 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 diese zur 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 Dreiecks als Ursprung der Transformation zu verwenden.

Syntax

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

Parameter

• Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und andere Eigenschaften des Dreiecks im Zusammenhang mit den Eigenschaften angle und centeredRotation ändern.

Optionsschlüssel

• Angle – Diese Eigenschaft akzeptiert eine Number, die den Drehwinkel des Dreiecks in Grad angibt.

• centeredRotation – Diese Eigenschaft akzeptiert einen booleschen Wert, der bestimmt, ob der Mittelpunkt des Dreiecks der Ursprung der Transformation ist. 确定三角形中心是否为变换原点的值。

Beispiel 1

Winkel als Schlüssel übergeben Benutzerdefinierten Wert verwenden und zentrierte Drehung des Dreiecks deaktivieren

Sehen wir uns ein Codebeispiel zum Festlegen des Dreieckdrehwinkels in FabricJS an. Negative Winkel geben eine Richtung gegen den Uhrzeigersinn an, während positive Winkel eine Richtung im Uhrzeigersinn angeben. Da wir centeredRotation einen falschen Wert zugewiesen haben, wird das Dreieck unter Verwendung seiner Eckpunkte als Drehzentrum gedreht.

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


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
填写：“#deb887”，
居中旋转：假，
角度：15，
});

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

Beispiel 2

Dreieckszentrierte Rotation aktivieren

Aus diesem Beispiel können wir ersehen, dass unser Dreieck nun seinen Mittelpunkt als Rotationszentrum verwendet, indem wir die Eigenschaft centeredRotation auf „true“ setzen. Vor Version 1.3.4 waren centeredScaling und centeredRotation in einer Eigenschaft namens centerTransform enthalten.

启用三角形的居中旋转
旋转三角形即可看到居中旋转已启用


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
填写：“#deb887”，
居中旋转：true，
角度：15，
});

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

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