FabricJSを使用して楕円の回転角度を設定するにはどうすればよいですか?-jsチュートリアル-php.cn

如何使用 FabricJS 设置椭圆的旋转角度？

在本教程中，我们将使用 FabricJS 设置椭圆的旋转角度。椭圆形是 FabricJS 提供的各种形状之一。为了创建一个椭圆，我们必须创建一个 Fabric.Ellipse 类的实例并将其添加到画布中。 FabricJS 中的角度属性定义了对象的 2D 旋转角度。我们还有centeredRotation属性，它允许我们使用椭圆的中心点作为变换的原点。

语法

new fabric.Ellipse({ angle: Number, centeredRotation: Boolean }: Object)

ログイン後にコピー

参数

选项（可选）- 此参数是一个对象< /em> 为我们的椭圆提供额外的定制。使用此参数可以更改与画布相关的颜色、光标、描边宽度和许多其他属性，其中角度和centeredRotation是属性。

< h2>选项键

角度- 此属性接受数字< /em>指定椭圆的旋转角度（以度为单位）。

centeredRotation- 这属性接受一个布尔值，该值确定椭圆的中心是否是变换的原点。

示例 1
传递 < 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

ログイン後にコピー

示例 2
启用椭圆居中旋转
从这个示例中我们可以看出，通过设置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 中国語 Web サイトの他の関連記事を参照してください。