在本教程中,我们将使用 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 设置三角形的旋转角度?的详细内容。