如何在 Fabric.js 中設定相對於畫布圓形頂部的位 置?


Fabric.js 的 Circle 類用於透過 fabric.Circle 物件提供圓形形狀。Circle 物件用於提供圓形形狀,該圓形是可移動的,並且可以根據需要進行拉伸。對於筆觸、顏色、寬度、高度和填充顏色,Circle 是可自定義的。與 canvas 類相比,Circle 類提供了更豐富的功能。

Circle 類包含不同的屬性,但是可以透過 top 屬性來設定相對於畫布圓形頂部的位 置。Fabric.js 類的 top 屬性指定了相對於圓形頂部的位 置。它可以用來建立或設定圓形相對於頂部的位 置。top 屬性用於指定或設定圓形的垂直位 置,該位 置相對於畫布頂部。

語法

以下是圓形物件的語法:

fabric.Circle(radius: number, top: number);

引數

以下是用於設定相對於畫布圓形頂部的位 置的兩個引數:

  • 半徑 (radius) - 用於指定圓形的半徑

  • 頂部 (top) - 指定頂部邊緣的相對距離

步驟

按照以下步驟使用 Fabric.js 設定相對於畫布圓形頂部的位 置:

步驟 1 - 在 HTML 檔案中包含 Fabric.js 庫

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

步驟 3 - 在 JavaScript 程式碼中初始化畫布元素

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

步驟 5 - top 屬性用於將畫布圓形指定到頂部邊緣

步驟 6 - 將圓形物件新增到畫布

示例

讓我們看看如何使用 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 position relative to top of a canvas circle using the Fabric.js</h2>
      <p>You can select the textbox to see the controlling corners.</p>
      <p>The position relative to top is set to 60.</p>
      <canvas id="positiontopcanvas"></canvas>
      <script> 
         var canvas = new fabric.Canvas('positiontopcanvas'); 
         var circle4 = new fabric.Circle( {
              radius: 70,
            top: 60
         }); 
         canvas.add(circle4);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(500);
      </script> 
   </body> 
</html>

此程式碼將建立一個具有指定 ID 的新圓形畫布元素,建立一個新的 Fabric.js 類 Circle 物件,並使用 top 屬性設定相對於畫布圓形頂部的位 置,並將圓形物件新增到畫布。在這裡,我們將頂部 x 座標定義為距畫布圓形頂部邊緣 60 畫素。

示例

讓我們看看另一個示例,其中我們可以使用 top 屬性以及 top、radius、stroke 和 fill 等引數來設定相對於畫布圓形頂部的位 置。

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the position relative to top of a canvas circle</h2>
      <p>You can select the textbox to see the controlling corners.</p>
      <p>The position realtive to top is set to 50.</p>
      <canvas id="topcanvas"></canvas>
      <script>
         var canvas = new fabric.Canvas('topcanvas'); 
         var circle5 = new fabric.Circle({
            fill: 'red',
            stroke: 'blue',
            radius: 70,
            top: 50
         }); 

         canvas.add(circle5);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(400);
      </script> 
   </body> 
</html>

此程式碼將建立一個具有指定 ID 和尺寸的新圓形畫布元素,建立一個新的 Fabric.js 類 Circle 物件,並使用 top 屬性設定相對於畫布圓形頂部的位 置,並將圓形類物件新增到畫布。圓形將以我們在示例中定義的尺寸顯示在畫布上。

top 屬性用於設定圓形相對於畫布頂部的垂直位 置。另一方面,left 屬性用於設定圓形相對於畫布左側的水平位 置。

結論

在本文中,我們演示瞭如何設定相對於畫布圓形頂部的位 置以及示例。我們在這裡看到了兩個不同的示例,我們使用了 top 屬性來設定相對於畫布圓形頂部的位 置。在第一個示例中,我們使用“top”屬性將其設定為相對於畫布圓形頂部的位 置。對於第二個示例,我們使用了 top 屬性和各種尺寸引數(如 top、fill、radius 和 stroke)來設定相對於頂部的位 置。

更新於:2023年2月24日

瀏覽量:377

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告