在本教程中,我们将使用 FabricJS 设置椭圆的旋转角度。椭圆形是 FabricJS 提供的各种形状之一。为了创建一个椭圆,我们必须创建一个 Fabric.Ellipse 类的实例并将其添加到画布中。 FabricJS 中的角度属性定义了对象的 2D 旋转角度。我们还有 centeredRotation 属性,它允许我们使用椭圆的中心点作为变换的原点。
new fabric.Ellipse({ angle: Number, centeredRotation: Boolean }: Object)
选项(可选)- 此参数是一个对象< /em> 为我们的椭圆提供额外的定制。使用此参数可以更改与画布相关的颜色、光标、描边宽度和许多其他属性,其中角度和centeredRotation是属性。
角度 - 此属性接受数字< /em> 指定椭圆的旋转角度(以度为单位)。
centeredRotation - 这属性接受一个布尔值,该值确定椭圆的中心是否是变换的原点。
传递 < em>angle 作为具有自定义值的键,并禁用椭圆的居中旋转
让我们举个例子,在 FabricJS 中设置椭圆的旋转角度。负角度指定逆时针方向,而正角度指定顺时针方向。由于我们为centeredRotation分配了一个“false”值,因此椭圆将在使用其角点作为旋转中心的同时进行旋转。
How to set the angle of rotation of an Ellipse using FabricJS?
Select the object and rotate it. Here we have set the angle of rotation at -40
启用椭圆居中旋转
从这个示例中我们可以看出,通过设置 centeredRotation 属性为“true”,我们的椭圆现在使用其中心作为旋转中心。在版本 1.3.4 之前,centeredScaling 和 centeredRotation 包含在一个名为 centerTransform 的属性中。
How to set the angle of rotation of an Ellipse using FabricJS?
Select the object and rotate it. You will notice that the object rotates around its center as we have set the centeredRotation property to True.
以上是如何使用 FabricJS 设置椭圆的旋转角度?的详细内容。更多信息请关注PHP中文网其他相关文章!