在本教程中，我們將學(xué)習(xí)如何使用 FabricJS 從左側(cè)設(shè)置三角形的位置。三角形是 FabricJS 提供的各種形狀之一。為了創(chuàng)建三角形，我們必須創(chuàng)建 fabric.Triangle 類的實例，并將其添加到 canvas.
我們可以通過更改三角形對象的位置、不透明度、描邊及其尺寸來操作三角形對象。可以使用 left 屬性來更改左側(cè)的位置。
Syntax
new Fabric.Triangle( { left: Number }: Object )
登錄后復(fù)制
參數(shù)
選項?(可選)phpcnltphp cn/strong> – 此參數(shù)是 Object ，它為我們的三角形提供了額外的自定義。使用此參數(shù)，可以更改與 left 為屬性的對象相關(guān)的顏色、光標、描邊寬度等屬性。
Options Keys</h2phpcngtphp cn
left – 此屬性接受 Number 值，用于設(shè)置對象的左側(cè)位置。該值確定對象將放置在距離畫布左邊緣多遠的位置。
示例 1
三角形對象的默認放置位置</strongphpcn gtphpcn
讓我們看一個代碼示例來了解三角形對象的默認放置位置位置未更改時的畫布。
三角形對象的默認放置
可以看到三角形的默認位置
// 啟動畫布實例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
畫布.setHeight(250);
// 初始化一個三角形對象
var triangle = new Fabric.Triangle({
頂部：50，
填寫：“#b0e0e6”，
身高：90，
寬度：100，
});
// 將其添加到畫布中
canvas.add(三角形);
left – 此屬性接受 Number 值，用于設(shè)置對象的左側(cè)位置。該值確定對象將放置在距離畫布左邊緣多遠的位置。
示例 1
三角形對象的默認放置位置</strongphpcn gtphpcn
讓我們看一個代碼示例來了解三角形對象的默認放置位置位置未更改時的畫布。
三角形對象的默認放置
可以看到三角形的默認位置
// 啟動畫布實例 var canvas = new Fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); 畫布.setHeight(250); // 初始化一個三角形對象 var triangle = new Fabric.Triangle({ 頂部：50， 填寫：“#b0e0e6”， 身高：90， 寬度：100， }); // 將其添加到畫布中 canvas.add(三角形);登錄后復(fù)制
示例 2
將左側(cè)屬性作為密鑰傳遞
在此示例中，我們正在為 left 屬性分配自定義值。由于它接受 Number，因此您必須為其分配一個數(shù)值，該數(shù)值將代表其從左側(cè)開始的位置。
將左側(cè)屬性作為密鑰傳遞
可以看到三角形放置在距左側(cè)80px的位置。
// 啟動畫布實例 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(三角形);
登錄后復(fù)制
以上就是如何使用 FabricJS 設(shè)置三角形從左開始的位置？的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
