如何使用FabricJS鎖定Triangle的垂直移動？

在本教學中，我們將學習如何使用 FabricJS 鎖定三角形的垂直移動。正如我們可以指定畫布中三角形物件的位置、顏色、不透明度和尺寸一樣，我們也可以指定是否希望它僅在 X 軸上移動。這可以透過使用 lockMovementY 屬性來完成。

語法

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

參數

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

< /ul>

選項鍵

• lockMovementY 此屬性接受布林值。如果我們為其指定「true」值，則該物件將不再能夠在垂直方向上移動。

範例1

< strong>畫布中三角形物件的預設行為

讓我們看一個程式碼範例，以了解如何在 時在X 軸或Y 軸上自由移動三角形物件>lockMovementY 屬性未指派「true」值。

画布中 Triangle 对象的默认行为
您可以选择三角形并将其拖动。请注意，您可以在水平和垂直方向上移动对象。


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

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

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

登入後複製

範例2

將lockMovementY 作為具有「true」值的鍵傳遞

在此範例中，我們將看到我們如何鎖定三角形對象的垂直運動。透過為 lockMovementY 屬性指派「true」值，我們基本上停止了垂直方向的移動。

将 lockMovementY 作为具有“true”值的键传递
您可以选择并拖动三角形以查看不再允许在 y 方向上移动。


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#ffc1cc”，
笔划：“#fbaed2”，
笔划宽度：5，
锁定运动Y：true，
});

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

登入後複製

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