如何在使用 FabricJS 縮放時保持三角形的筆畫寬度？

在本教學中，我們將學習如何在使用 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 縮放時保持三角形的筆畫寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！