首頁 > 文章 > web前端 > 如何使用 Fabric.js 設定畫布圓的描邊寬度？

如何使用 Fabric.js 設定畫布圓的描邊寬度？

WBOY轉載: 2023-08-28 13:53:05717瀏覽

如何使用 Fabric.js 设置画布圆的描边宽度？

描邊和描邊寬度屬性用於設定畫布圓的描邊顏色和描邊寬度。 Circle 類別包含不同的屬性，但要設定描邊顏色和寬度，我們使用描邊和描邊寬度屬性。 strokeWidth 屬性用於指定畫布圓的寬度。

Fabric.js Circle 類別用於透過 Fabric.Circle 物件提供圓形形狀。 Circle物件用於提供圓形形狀，並且圓形是可移動的，並且可以根據需求進行拉伸。對於圓形的描邊、顏色、寬度、高度和填滿顏色，都是可自訂的。與canvas類別相比，Circle類別提供了豐富的功能。

文法

以下是文字物件的語法 -

fabric.Circle({
   radius: number,
   stroke: string,
   strokeWidth: number
});

參數

radius - 用來指定圓的半徑

描邊 - 指定描邊的顏色。

描邊寬度 - 用來指定描邊的寬度

步驟

按照下面給出的步驟使用 Fabric.js 設定畫布圓的水平傾斜 -

第 1 步 - 在 HTML 檔案中包含 Fabric.js 函式庫

第 2 步驟 - 在 HTML 檔案中建立一個新的畫布元素

第 3 步 - 在 JavaScript 程式碼中初始化 canvas 元素

第 4 步 - 建立一個新的 Fabric.js Circle 類別物件並將 skewX 屬性設定為所需的圓值

第 5 步 - 將圓形物件加入到畫布

範例

讓我們看看如何使用 Fabric.js 設定畫布圓的描邊顏色和描邊寬度 -

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: green, stoke width: 20</p>
      <canvas id="strokecanvas"></canvas>
      <script>
         // Initiating a canvas instance
         var canvas = new fabric.Canvas('strokecanvas'); 
       
         // Create a instance of fabric.Circle Class
         var circle6 = new fabric.Circle({
            top: 50,
            left: 50,
            radius: 70,
            stroke: "green",
            strokeWidth: 20
         }); 
         
         // Adding the Canvas
         canvas.add(circle6);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(350);
      </script> 
   </body> 
</html>

此程式碼將建立一個具有指定ID 的新畫布圓形元素，建立一個新的Fabric.js Circle 類別對象，並使用描邊和描邊寬度屬性設定圓形的描邊顏色和描邊寬度，並將圓形物件新增至畫布。該圓圈將以水平傾斜的方式出現在畫布上。

範例

讓我們來看另一個例子，我們可以透過使用描邊和描邊寬度方法以及左、上、填滿、半徑等屬性來設定畫布圓的描邊顏色和描邊寬度。

<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: blue, stoke width: 20</p>
      <canvas id="canvasstroke"></canvas>

      <script>
         var canvas = new fabric.Canvas('canvasstroke'); 
         var circle5 = new fabric.Circle({
            top: 60,
            left: 60,
            fill: "violet",
            radius: 70,
            stroke: "blue",
            strokeWidth: 20
         }); 
         
         canvas.add(circle5);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(500);
      </script> 
   </body> 
</html>

此程式碼將建立一個具有指定ID 和尺寸的新畫布圓元素，建立一個新的Fabric.js Circle 類別對象，並使用strokeWidth 屬性將畫布圓設定為描邊顏色和描邊寬度，並將該類物件添加到帆布。該圓圈將出現在畫布上，其尺寸如我們在範例中定義的那樣。

結論

在本文中，我們透過範例示範如何設定畫布圓的描邊寬度和描邊顏色。我們在這裡看到了兩個不同的範例，我們使用了描邊和描邊寬度屬性來設定圓形畫布的描邊寬度和顏色。在第一個範例中，我們使用「描邊」和「描邊寬度」屬性來設定畫布圓的顏色和寬度。對於第二個範例，我們使用了Stroke和StrokeWidth屬性方法以及各種尺寸的參數（例如Left，Top，Fill等）來設定圓形畫布的寬度和顏色描邊。

以上是如何使用 Fabric.js 設定畫布圓的描邊寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html JS 对象 canvas fabric

陳述：

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

上一篇：如何在 JavaScript 中從字串建立函數？下一篇：如何在 JavaScript 中從字串建立函數？

看更多