如何使用FabricJS锁定Triangle的垂直移动？

在本教程中，我们将学习如何使用 FabricJS 锁定三角形的垂直移动。正如我们可以指定画布中三角形对象的位置、颜色、不透明度和尺寸一样，我们也可以指定是否希望它仅在 X 轴上移动。这可以通过使用 lockMovementY 属性来完成。

语法

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

参数

• 选项 （可选） - 此参数是一个对象，它为我们的三角形提供额外的自定义。使用此参数，可以更改与 lockMovementY 为属性的对象相关的属性，例如颜色、光标、描边宽度和许多其他属性。

选项键

• lockMovementY 此属性接受布尔值。如果我们为其指定“true”值，则该对象将不再能够在垂直方向上移动。

示例 1

画布中三角形对象的默认行为

让我们看一个代码示例，以了解如何在 时在 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中文网其他相关文章！