如何使用 FabricJS 在移动时设置圆的边框不透明度？-js教程-PHP中文网

如何使用 FabricJS 在移动时设置圆的边框不透明度？

王林

发布： 2023-08-24 14:53:02

转载

850人浏览过

如何使用 fabricjs 在移动时设置圆的边框不透明度？

在本教程中，我们将使用 FabricJS 在移动时设置 Circle 的边框不透明度。圆形是 FabricJS 提供的各种形状之一。为了创建一个圆圈，我们必须创建一个 Fabric.Circle 类的实例并将其添加到画布中。我们可以使用 borderOpacityWhenMoving 属性在画布中移动圆形时更改其不透明度。

语法

new fabric.Circle({ borderOpacityWhenMoving: Number }: Object)

登录后复制

参数

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

选项键

borderOpacityWhenMoving - 此属性接受数字，指定移动圆圈时我们希望边框的不透明程度。它允许我们在移动圆形对象时控制边框的不透明度。默认值为 0.4。

示例 1

显示 borderOpacityWhenMoving 属性的默认行为

让我们看一个示例，显示 boderOpacityWhenMoving 属性的默认行为。当我们选择圆形对象并将其在画布上移动时，选择边框的不透明度从 1（完全不透明）更改为 0.4，这使其看起来有点半透明。

<!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>Setting the border opacity of Circle while moving using FabricJS</h2>
      <p>Select the object and move it around. Notice that the opacity of the outline border reduces slightly while moving the object. This is the default behavior. Here we have not used the <b>boderOpacityWhenMoving</b> property.</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: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
         });

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

登录后复制

示例 2

将 borderOpacityWhenMoving 作为键传递

让我们看一个为 borderOpacityWhenMoving 属性赋值的示例。在本例中，我们将值指定为 0。这告诉我们，当我们移动圆时，边框不透明度将更改为 0 并且不可见。

<!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>How to set the border opacity of Circle while moving using FabricJS?</h2>
      <p>Select the object and move it around. You will notice that the border opacity becomes 0 when moving the object. Here we have set <b>borderOpacityWhenMoving</b> to 0.</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: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
            borderOpacityWhenMoving: 0,
         });

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

登录后复制

以上就是如何使用 FabricJS 在移动时设置圆的边框不透明度？的详细内容，更多请关注php中文网其它相关文章！