首頁 >web前端 >js教程 >如何使用 FabricJS 將破折號新增到畫布上選擇區域的邊框？

如何使用 FabricJS 將破折號新增到畫布上選擇區域的邊框？

PHPz轉載: 2023-09-06 18:25:02661瀏覽

如何使用 FabricJS 将破折号添加到画布上选择区域的边框？

在本文中，我們將學習如何使用 FabricJS 將破折號新增到畫布上選擇區域的邊框。我們可以透過使用 SelectionDashArray 屬性來實現這一點。它允許我們將選擇區域的邊框設為虛線。

語法

new fabric.Canvas(element: HTMLElement|String, { selectionDashArray: Array }: Object)

參數

# - 此參數是
選項（可選） - 此參數是一個對象，它提供對我們的畫布進行額外的自訂。使用這個參數可以改變畫布相關的顏色、遊標、邊框寬度等很多屬性，其中selectionDashArray就是一個屬性。它接受一個數組，該數組確定我們想要的破折號圖案。

範例1

將SelectionDashArray 作為鍵傳遞給類別 strong>

selectionDashArray 允許我們將選取區域的邊框設為虛線。定義破折號圖案的方法是指定數組中破折號的長度。在下面的範例中，我們採用了 [7,6] 陣列。這意味著，將會有一條 7px 長的線，後面跟著一個 6px 的間隙，依此類推。

<!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>Adding dashes to the border of a selection area on a canvas</h2>
   <p>Select an area around the object. The border of the selection area would have dashed lines.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionDashArray: [7, 6],
         selectionBorderColor: "red"
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 200,
         top: 100,
         radius: 40,
         fill: "blue",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

範例2

將selectionDashArray與selectionLineWidth和selectionBorderColor結合使用

selectionDashArray屬性可以透過多種方式使用。一種方法是將其與selectionLineWidth和selectionBorderColor結合使用，它們分別指定選取邊框的寬度和選取邊框的顏色。

<!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>Adding dashes to the border of a selection area on a canvas</h2>
   <p>Select an area around the object and observe the outline of the selection area. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionDashArray: [13, 16],
         selectionLineWidth: 5,
         selectionBorderColor: "green",
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 200,
         top: 100,
         radius: 40,
         fill: "blue",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

以上是如何使用 FabricJS 將破折號新增到畫布上選擇區域的邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

对象

陳述：

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

上一篇：如何使用 FabricJS 來尋找影像的原始大小？下一篇：如何使用 FabricJS 來尋找影像的原始大小？

看更多