最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • 如何使用 FabricJS 设置圆的旋转角度?

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

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

    语法

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

    参数

    • 选项(可选) – 此参数是一个对象 为我们的对象提供额外的定制。使用此参数,可以更改与圆相关的颜色、光标、描边宽度等属性,其中 anglecenteredRotation 是属性。 p>

    选项键

    • 角度 – 这个属性接受一个数字,它指定圆的旋转角度(以度为单位)。

    • centeredRotation – 此属性接受一个布尔值值,该值确定圆心是否是变换的原点。

    示例 1

    将角度作为具有自定义值的键传递并禁用圆的居中旋转

    以下示例演示了如何在 FabricJS 中设置圆的旋转角度。负角度指定逆时针方向,而正角度指定顺时针方向。由于我们已为 centeredRotation 指定了 False 值,因此圆将在使用其角点作为旋转中心的同时进行旋转。

    <!DOCTYPE html>
    <html>
       <head>
          <!-- Adding the Fabric JS Library-->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
       </head>
    
       <body>
          <h2>Set the angle of rotation of a Circle using FabricJS</h2>
          <p>Select the object and observe its controlling corners. You will notice that the angle of rotation is set at 60 degrees in the anti-clockwise direction, as we have set the <b>angle</b> at <b>-60</b>. </p>
          <canvas id="canvas"></canvas>
    
          <script>
             // Initiate a canvas instance
             var canvas = new fabric.Canvas("canvas");
             var cir = new fabric.Circle({
                left: 215,
                top: 100,
                radius: 50,
                fill: "green",
                stroke: "blue",
                strokeWidth: 2,
                angle: -60,
                centeredRotation: false,
             });
    
             // Adding it to the canvas
             canvas.add(cir);
             canvas.setWidth(document.body.scrollWidth);
             canvas.setHeight(250);
          </script>
       </body>
    </html>

    示例2

    启用圆的居中旋转

    从这个示例中我们可以看到,通过设置centeredRotation 属性为True,我们的圆现在使用其中心作为旋转中心。在版本 1.3.4 之前,centeredScalingcenteredRotation 包含在一个名为 centerTransform 的属性中。

    <!DOCTYPE html>
    <html>
       <head>
          <!-- Adding the Fabric JS Library-->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
       </head>
    
       <body>
          <h2>Set the angle of rotation of a Circle using FabricJS</h2>
          <p>Select the object and observe its controlling corners. Here we have set the angle of rotation at 60 degrees in the anti-clockwise direction, and when you rotate the circle, it will rotate around its center, as we have set <b>centeredRotation</b> to True. </p>
          <canvas id="canvas"></canvas>
    
          <script>
             // Initiate a canvas instance
             var canvas = new fabric.Canvas("canvas");
             var cir = new fabric.Circle({
                left: 215,
                top: 100,
                radius: 50,
                fill: "green",
                stroke: "blue",
                strokeWidth: 2,
                angle: -60,
                centeredRotation: true,
             });
    
             // Adding it to the canvas
             canvas.add(cir);
             canvas.setWidth(document.body.scrollWidth);
             canvas.setHeight(250);
          </script>
       </body>
    </html>
    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » 如何使用 FabricJS 设置圆的旋转角度?
    • 4会员总数(位)
    • 20469资源总数(个)
    • 940本周发布(个)
    • 0 今日发布(个)
    • 144稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情