如何使用 FabricJS 禁用圆的居中旋转？-js教程-PHP中文网

如何使用 FabricJS 禁用圆的居中旋转？

PHPz

发布： 2023-08-31 11:21:06

转载

873人浏览过

如何使用 fabricjs 禁用圆的居中旋转？

在本教程中，我们将学习如何使用 FabricJS 禁用 Circle 的居中旋转。圆形是 FabricJS 提供的各种形状之一。为了创建一个圆圈，我们将创建一个 Fabric.Circle 类的实例并将其添加到画布中。默认情况下，FabricJS 中的所有对象都使用其中心作为旋转点。但是，我们可以使用 centeredRotation 属性来更改此行为。

语法

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

登录后复制

参数

选项（可选） - 此参数是一个对象为我们的圈子提供额外的定制。使用此参数，可以更改与 centeredRotation 属性相关的对象的颜色、光标、描边宽度等属性。

选项键

centeredRotation - 此属性接受布尔值值允许我们控制对象在通过控件旋转时是否使用其变换原点作为中心点。其默认值为 True。

示例 1

旋转的默认行为 > FabricJS 中的 Circle

让我们看一个描述圆形对象默认行为的示例。由于centeredRotation属性默认设置为True，因此圆形对象使用其中心作为旋转点。

<!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>Disabling the centered rotation of circle using FabricJs</h2>
      <p>Select the object and rotate it by holding its controlling corner at the top. The circle will rotate around its center. It is the default behavior. Here we have not used the <b>centeredRotation</b> property but it is by default set 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,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

登录后复制

示例 2

传递值为“false”的 centeredRotation 键

现在我们已经看到了默认行为，让我们看一段代码来了解当 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>Disabling the centered rotation of circle using FabricJs</h2>
      <p>Select the object and rotate it by holding its controlling corner at the top. Now the circle will not rotate around its cente because we have used the <b>centeredRotation</b> property and set it False. </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,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredRotation: false
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

登录后复制

以上就是如何使用 FabricJS 禁用圆的居中旋转？的详细内容，更多请关注php中文网其它相关文章！