How to lock the vertical movement of a Triangle using FabricJS?

In this tutorial, we will learn how to lock the vertical movement of a triangle using FabricJS. Just as we can specify the position, color, opacity, and size of a triangle object in the canvas, we can also specify whether we want it to move only on the X-axis. This can be done using the lockMovementY attribute.

Syntax

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

Parameters

• Options (optional) - This parameter is a Object, which provides additional customization to our triangle. Using this parameter, you can change properties related to the object for which lockMovementY is the property, such as color, cursor, stroke width, and many other properties.

Option Key

• lockMovementY This property accepts a Boolean value. If we give it a "true" value, the object will no longer be able to move vertically.

Example 1

Default behavior of triangle objects in canvas

Let's look at a code example to understand how to Freely move the triangle object on the X or Y axis when the >lockMovementY property is not assigned the "true" value.

画布中 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(三角形);

Example 2

Pass lockMovementY as key with "true" value

In this example we will see how we can lock Vertical movement of triangular objects. By assigning the "true" value to the lockMovementY property, we essentially stop vertical movement.

将 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(三角形);

The above is the detailed content of How to lock the vertical movement of a Triangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!