首頁 > 文章 > web前端 > 如何使用 FabricJS 在移動時設定圓的邊框不透明度？

如何使用 FabricJS 在移動時設定圓的邊框不透明度？

王林轉載: 2023-08-24 14:53:02776瀏覽

如何使用 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>

將 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中文網其他相關文章！

对象 fabric

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用FabricJS設定橢圓的填滿顏色？下一篇：如何使用FabricJS設定橢圓的填滿顏色？

看更多