How to set the rotation angle of a triangle using FabricJS?

#In this tutorial, we will set the rotation angle of a triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the fabric.Triangle class and add it to the canvas.

angleThe 2D rotation angle of the object is defined in the property FabricJS. We also have the centeredRotation property, which allows us to use the center point of the triangle as the origin of the transformation.

Syntax

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

Parameters

• < strong>Options(optional) - This parameter is a Object, which provides additional customization to our triangle. Using this parameter, you can change the color, cursor, stroke width, and other properties of the triangle related to the angle and centeredRotation properties. < /p>

Option Key

• Angle - This property accepts Number, specifying the rotation angle of the triangle (in degrees).

• centeredRotation - This property accepts a Boolean value

Example 1

Pass angle as key Use custom value and disable center rotation of triangle

Let’s see A code example for setting the rotation angle of a triangle in FabricJS. Negative angles specify a counterclockwise direction, while positive angles specify a clockwise direction. Since we assigned a false value to centeredRotation, the triangle will be rotated using its corner points as the center of rotation.

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


// 启动画布实例
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(三角形);

Example 2

Enable triangle center rotation

From this example we can see that by setting the centeredRotation property is true, our triangle now uses its center as the center of rotation. Prior to version 1.3.4, centeredScaling and centeredRotation were contained in a property called centerTransform.

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


// 启动画布实例
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(三角形);

The above is the detailed content of How to set the rotation angle of a triangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!