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 thefabric.Triangleclass 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 thescaleXproperty.

Syntax

new Fabric.Triangle({ scaleX : Number }: Object)

Parameters

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

< /ul>

Option Key

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

Example 1

Default appearance whenscaleXis not used

Let’s look at a code Example showing what a triangle object looks like when thescaleXproperty 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(三角形);

Copy after login

Example 2

Passing thescaleXattribute as key

In this example we willscaleXThe 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(三角形);

Copy after login

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!