在本教程中，我們將學(xué)習(xí)如何在使用 FabricJS 縮放時保持三角形的筆劃寬度。默認(rèn)情況下，描邊寬度根據(jù)對象的比例值增大或減小。但是，我們可以通過使用 StrokeUniform 屬性來禁用此行為。
語法
new Fabric.Triangle({ strokeUniform: Boolean }: Object)
登錄后復(fù)制
參數(shù)
選項 （可選） – 此參數(shù)是一個對象，它為我們的三角形提供額外的自定義。使用此參數(shù)，可以更改與對象相關(guān)的屬性，例如顏色、光標(biāo)、描邊寬度和許多其他屬性，strikeUniform 是該對象的屬性。
選項鍵
中風(fēng)統(tǒng)一 – 該屬性接受一個布爾值，允許我們指定描邊寬度是否隨對象一起縮放。其默認(rèn)值為 false。
示例 1
縮放對象時描邊寬度的默認(rèn)外觀
讓我們看一個代碼示例，它描述了正在縮放的??三角形對象的描邊寬度的默認(rèn)外觀。由于我們沒有使用 tripUniform 屬性，因此筆畫寬度也會受到對象縮放的影響。
縮放對象時描邊寬度的默認(rèn)外觀
選擇三角形并嘗試縮放它，可以看到縮放時描邊寬度也發(fā)生變化
// 啟動畫布實例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
畫布.setHeight(250);
// 初始化一個三角形對象
var triangle = new Fabric.Triangle({
左：105，
頂部：75，
寬度：90，
身高：80，
填寫：“#ff878d”，
筆畫: "#674846",
筆劃寬度：5，
});
// 將其添加到畫布中
canvas.add(三角形);
登錄后復(fù)制
示例 2
將 strikeUniform 屬性作為鍵傳遞
在此示例中，我們將 strikeUniform 屬性作為鍵傳遞，并以 True 作為值。因此，對象的筆劃將不再隨著對象的縮放而增加或減少，這將確保筆劃始終與為筆劃寬度輸入的確切像素大小相匹配。
將 strokeUniform 屬性作為鍵傳遞
選擇三角形并嘗試縮放它，看看我們在縮放時具有固定的描邊寬度
// 啟動畫布實例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
畫布.setHeight(250);
// 初始化一個三角形對象
var triangle = new Fabric.Triangle({
左：105，
頂部：75，
寬度：90，
身高：80，
填寫：“#ff878d”，
筆畫: "#674846",
筆劃寬度：5，
筆劃統(tǒng)一：true，
});
// 將其添加到畫布中
canvas.add(三角形);
登錄后復(fù)制
以上就是如何在使用 FabricJS 縮放時保持三角形的筆劃寬度？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
