如何使用FabricJS鎖定Triangle的垂直縮放？

在本教學中，我們將學習如何使用 FabricJS 鎖定三角形的垂直縮放。正如我們可以指定畫布中三角形物件的位置、顏色、不透明度和尺寸一樣，我們也可以指定是否要停止垂直縮放物件。這可以透過使用 lockScalingY 屬性來完成。

語法

 new Fabric.Triangle({ lockScalingY : Boolean }: Object)

參數

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

選項鍵

• lockScalingY − 此屬性接受布林值 值。如果我們為其指定“true”值，則物件的垂直縮放將被鎖定。

範例1

a 的預設行為畫布中的Triangle 物件

讓我們看一個程式碼範例，以了解未使用lockScalingY 屬性時Triangle 物件的預設行為。在水平和垂直方向上縮放物件是可行的。

画布中 Triangle 对象的默认行为
您可以在水平和垂直方向上缩放三角形，以验证是否可以在两个方向上缩放。


// 启动画布实例
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

將lockScalingY 當作具有「true」值的鍵傳遞

在此範例中，我們將了解如何使用lockScalingY 屬性來停止Triangle 物件垂直縮放的能力。正如我們所看到的，雖然我們可以水平縮放三角形對象，但我們不允許垂直執行相同的操作。

 






将 lockScalingY 作为具有“true”值的键传递
如果尝试在 y 方向缩放三角形，您会看到不允许的光标

  
// 启动画布实例
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，
lockScalingY：true，
});

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

以上是如何使用FabricJS鎖定Triangle的垂直縮放？的詳細內容。更多資訊請關注PHP中文網其他相關文章！