How to set the horizontal scale factor of a triangle using FabricJS?

#In this tutorial, we will learn how to set the horizontal scale factor of a triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the fabric.Triangle class and add it to the canvas.

Just like we can specify the position, color, opacity and size of the triangle object in the canvas, we can also set the horizontal scale of the triangle object. This can be done using the scaleX property.

Syntax

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

Option Key

• scaleX - This property accepts a numeric value. The assigned value determines the horizontal object scale factor. Its default value is 1.

Example 1

Default appearance when scaleX is not used

Let’s look at a code Example showing what a triangle object looks like when the scaleX property is not used. By default, triangle objects have a horizontal scale factor of 1. scaleX determines the transformation that resizes the object along the X-axis.

不使用scaleX时的默认外观
您可以看到沿 x 轴没有调整大小


// 启动画布实例
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 the scaleX attribute as key

In this example we will scaleX The attribute is passed as a key with a value of 2. This means that the scale factor of the triangular object in the horizontal direction is doubled.

将scaleX属性作为键传递
请注意，对象的水平宽度现在已加倍


// 启动画布实例
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，
规模X：2，
});

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

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