Comment définir l'angle de rotation d'un rectangle à l'aide de FabricJS ?

在本教程中，我们将使用 FabricJS 设置矩形的旋转角度。矩形是 FabricJS 提供的各种形状之一。为了创建一个矩形，我们必须创建一个fabric.Rect类的实例并将其添加到画布中。

angle属性FabricJS 中定义了对象的 2D 旋转角度。我们还有 centeredRotation 属性，允许我们使用矩形的中心点 作为变换的原点。

语法

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

Parameters

• 选项（可选） - 此参数是一个对象，它为我们的长方形。使用此参数，可以更改与角度和 centeredRotation 为属性的矩形相关的颜色、光标、描边宽度等属性以及许多其他属性。

选项键

• 角度 - 此属性接受指定的数字矩形的旋转角度（以度为单位）。

• centeredRotation - 该属性接受一个布尔值，该值确定是否矩形的中心是否为变换原点。

示例 1

将角度作为具有自定义值的键传递并禁用矩形的居中旋转

让我们看一个在 FabricJS 中设置矩形旋转角度的代码示例。负角度指定逆时针方向，而正角度指定顺时针方向。由于我们为 centeredRotation 分配了一个 False 值，因此矩形将在使用其角点作为旋转中心的同时进行旋转。

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


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

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

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

示例2

启用矩形的居中旋转

从这个示例中我们可以看到，通过设置centeredRotation 属性为 true，我们的 矩形现在使用其中心作为旋转中心。在 1.3.4 版本之前， centeredScaling 和 centeredRotation 包含在一个名为 centerTransform。

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


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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!