如何使用 FabricJS 鎖定三角形的垂直傾斜？

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

語法

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

參數

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

選項鍵

• lockSkewingY - 此屬性接受布林#值。如果我們為其指定“true”值，則物件的垂直傾斜將被鎖定。

範例1

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

讓我們看一個程式碼範例，以了解未使用lockSkewingY 屬性時Triangle 物件的預設行為。按下 shift 鍵，然後沿著水平或垂直方向拖曳，可以使物件在水平和垂直方向上傾斜。

画布中 Triangle 对象的默认行为
您可以按 Shift 键并沿 X 轴或 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，
});

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

範例2

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

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

 






将 lockSkewingY 作为具有“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，
lockSkewingY：true，
});

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

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