How to lock the vertical tilt of a triangle using FabricJS?

In this tutorial, we will learn how to lock the vertical tilt of a triangle using FabricJS. Just as we can specify the position, color, opacity, and size of the triangular object in the canvas, we can also specify whether we want to stop tilting the object vertically. This can be done using the lockSkewingY property.

Syntax

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

Parameters

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

Option Key

• lockSkewingY - This property accepts a Boolean value. If we give it a "true" value, the object's vertical tilt will be locked.

Example 1

#Default behavior of a Triangle object in canvas

Let's look at a code example to understand The default behavior of the Triangle object when the lockSkewingY property is not used. You can tilt an object horizontally and vertically by pressing the shift key and then dragging horizontally or vertically.

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

Example 2

Passing lockSkewingY as a key with a value of "true"

In this example we You'll learn how to use the lockSkewingY property to block the ability of a triangle object to tilt vertically. As we can see, while we can tilt a triangle object horizontally, we are not allowed to do the same operation vertically.

 






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

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