如何使用 FabricJS 設定三角形的水平比例因子？

在本教程中，我們將學習如何使用 FabricJS 設定三角形的水平比例因子。三角形是 FabricJS 提供的各種形狀之一。為了建立一個三角形，我們必須建立一個fabric.Triangle類別的實例並將其新增到畫布中。

就像我們可以指定位置、顏色一樣，畫布中三角形物件的不透明度和尺寸，我們也可以設定三角形物件的水平比例。這可以透過使用 scaleX 屬性來完成。

語法

 new Fabric.Triangle({ scaleX : Number }: Object)

參數

• #選項（可選） - 此參數是一個物件，它為我們的三角形提供額外的自訂。使用此參數，可以變更與 scaleX 為屬性的物件相關的屬性，例如顏色、遊標、描邊寬度和許多其他屬性。

< /ul>

選項鍵

• scaleX - 此屬性接受數字值。分配的值決定水平物件比例因子。其預設值為 1。

範例1

未使用scaleX 時的預設外觀

##讓我們來看一個程式碼範例，它在未使用

scaleX 屬性時顯示三角形物件的外觀。預設情況下，三角形物件的水平比例因子為 1。 scaleX 決定沿 X 軸調整物件大小的變換。

不使用scaleX时的默认外观
您可以看到沿 x 轴没有调整大小


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#746cc0”，
笔画：“#967bb6”，
笔划宽度：5，
});

// 将其添加到画布中
canvas.add(三角形);

登入後複製
範例2

將scaleX 屬性作為鍵傳遞

在此範例中，我們將

scaleX 屬性作為值為2 的鍵傳遞。這意味著三角形物件在水平方向的比例因子加倍。

将scaleX属性作为键传递
请注意，对象的水平宽度现在已加倍


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#746cc0”，
笔画：“#967bb6”，
笔划宽度：5，
规模X：2，
});

// 将其添加到画布中
canvas.add(三角形);

登入後複製

以上是如何使用 FabricJS 設定三角形的水平比例因子？的詳細內容。更多資訊請關注PHP中文網其他相關文章！