How to lock vertical scaling of Triangle using FabricJS?

In this tutorial, we will learn how to lock the vertical scaling 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 scaling the object vertically. This can be done using the lockScalingY property.

Syntax

 new Fabric.Triangle({ lockScalingY : 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 lockScalingY is an attribute, such as color, cursor, stroke width, and many other properties.

Option Key

• lockScalingY − This property accepts Boolean values value. If we give it a "true" value, the object's vertical scaling 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 lockScalingY property is not used. Scaling objects horizontally and vertically is possible.

画布中 Triangle 对象的默认行为
您可以在水平和垂直方向上缩放三角形，以验证是否可以在两个方向上缩放。


// 启动画布实例
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 lockScalingY as a key with a value of "true"

In this example we You'll learn how to use the lockScalingY property to stop a Triangle object's ability to scale vertically. As we can see, while we can scale a triangle object horizontally, we are not allowed to do the same operation vertically.

 






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

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

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