如何使用 FabricJS 设置三角形的旋转角度？

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

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

语法

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

参数

• Options（可选） - 此参数是一个对象，它为我们的三角形提供额外的自定义。使用此参数，可以更改与 angle 和 centeredRotation 属性相关的三角形的颜色、光标、描边宽度等属性。

选项键

• 角度 - 此属性接受 Number，指定三角形的旋转角度（以度为单位）。

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

示例 1

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

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

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


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

示例2

启用三角形居中旋转

从这个示例中我们可以看到，通过设置centeredRotation 属性为 true，我们的三角形现在使用其中心作为旋转中心。在版本 1.3.4 之前，centeredScaling 和 centeredRotation 包含在一个名为 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(三角形);

以上是如何使用 FabricJS 设置三角形的旋转角度？的详细内容。更多信息请关注PHP中文网其他相关文章！