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

#In this tutorial, we will set the rotation angle of a rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we must create an instance of the fabric.Rect 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 rectangle as the origin of the transformation.

Syntax

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

Parameters

• Options (optional) - This parameter is an object , which is our rectangle. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties related to the rectangle whose angle and centeredRotation are properties.

Option Key

• Angle - This property accepts a specified number rotation angle of the rectangle (in degrees).

• centeredRotation - This property accepts a Boolean value that determines whether the center of the rectangle is the transformation origin.

Example 1

Pass angle as key with custom value and disable center rotation of rectangle

Let’s Take a look at a code example that sets the rotation angle of a rectangle in FabricJS. Negative angles specify a counterclockwise direction, while positive angles specify a clockwise direction. Since we assigned centeredRotation a False value, the rectangle will be rotated while using its corners as the center of rotation.

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


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

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

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

Example 2

Enable centered rotation of the rectangle

From this example we can see that by setting the centeredRotation property to true, our The rectangle now uses its center as the center of rotation. Before version 1.3.4, centeredScaling and centeredRotation are contained in a package called centerTransform.

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


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

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

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