如何在 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)來設定相對於頂部的位 置。