如何使用 FabricJS 設定三角形從左開始的位置？
- WBOY轉載
- 2023-09-11 17:05:091165瀏覽
在本教學中，我們將學習如何使用 FabricJS 從左側設定三角形的位置。三角形是 FabricJS 提供的各種形狀之一。為了創建三角形，我們必須創建fabric.Triangle 類別的實例，並將其添加到canvas.
我們可以透過更改三角形物件的位置、不透明度、描邊及其尺寸來操作三角形物件。可以使用 left 屬性來更改左側的位置。
Syntax
new Fabric.Triangle( { left: Number }: Object ) 參數
選項p>選項 (可選)phpcnltphp cn/strong> - 此參數是Object ，它為我們的三角形提供了額外的自訂。使用此參數，可以變更與 left 為屬性的物件相關的顏色、遊標、描邊寬度等屬性。
Options Keys
left< strong> - 此屬性接受Number 值，用於設定物件的左側位置。此值決定物件將放置在距離畫布左邊緣多遠的位置。
範例1
三角形物件的預設放置位置 讓我們看一個程式碼範例來了解三角形物件的預設放置位置位置未更改時的畫布。 將左側屬性作為金鑰傳遞 在此範例中，我們正在為left 屬性指派自訂值。由於它接受 Number，因此您必須為其分配一個數值，該數值將代表其從左側開始的位置。 <!DOCTYPE html>
<html>
<head>
<!--新增Fabric JS函式庫-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>三角形物件的預設放置</h2>
<p>可以看到三角形的預設位置</p>
<canvas id="canvas"></canvas>
<script>
// 啟動畫布實例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
畫布.setHeight(250);
// 初始化一個三角形對象
var triangle = new Fabric.Triangle({
頂部：50，
填寫：“#b0e0e6”，
身高：90，
寬度：100，
});
// 將其加入到畫布中
canvas.add(三角形);
</script>
</body>
</html>範例2
<!DOCTYPE html>
<html>
<head>
<!--新增Fabric JS函式庫-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>將左側屬性作為密鑰傳遞</h2>
<p>可以看到三角形放置在距離左側80px的位置。 </p>
<canvas id="canvas"></canvas>
<script>
// 啟動畫布實例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
畫布.setHeight(250);
// 初始化一個三角形對象
var triangle = new Fabric.Triangle({
左：80，
頂部：50，
填寫：“#b0e0e6”，
身高：90，
寬度：100，
});
// 將其加入到畫布中
canvas.add(三角形);
</script>
</body>
</html>
以上是如何使用 FabricJS 設定三角形從左開始的位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！