在本教程中，我們將學習如何在使用 FabricJS 縮放時保持三角形的筆劃寬度。默認情況下，描邊寬度根據對象的比例值增大或減小。但是，我們可以通過使用 StrokeUniform 屬性來禁用此行為。
語法
new Fabric.Triangle({ strokeUniform: Boolean }: Object)
登錄后復制
參數
選項 （可選） – 此參數是一個對象，它為我們的三角形提供額外的自定義。使用此參數，可以更改與對象相關的屬性，例如顏色、光標、描邊寬度和許多其他屬性，strikeUniform 是該對象的屬性。
選項鍵
中風統一 – 該屬性接受一個布爾值，允許我們指定描邊寬度是否隨對象一起縮放。其默認值為 false。
示例 1
縮放對象時描邊寬度的默認外觀
讓我們看一個代碼示例，它描述了正在縮放的??三角形對象的描邊寬度的默認外觀。由于我們沒有使用 tripUniform 屬性，因此筆畫寬度也會受到對象縮放的影響。
縮放對象時描邊寬度的默認外觀
選擇三角形并嘗試縮放它，可以看到縮放時描邊寬度也發生變化
// 啟動畫布實例
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(三角形);
登錄后復制
示例 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，
筆劃統一：true，
});
// 將其添加到畫布中
canvas.add(三角形);
登錄后復制
以上就是如何在使用 FabricJS 縮放時保持三角形的筆劃寬度？的詳細內容，更多請關注www.92cms.cn其它相關文章！
