首页 > web前端 > js教程 > 正文

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

PHPz
发布: 2023-09-10 13:29:02
转载
1340 人浏览过

如何使用 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 之前,centeredScalingcenteredRotation 包含在一个名为 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中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!