How to set the height of a triangle using FabricJS?

In this tutorial, we will learn how to set the height 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.

We can manipulate the triangle object by changing its position, opacity, stroke and its dimensions. FabricJS allows us to control the size of objects using thewidthandheightproperties.

Syntax

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

Parameters

• < p>Options(optional)- This parameter is aObject, 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 an object whoseheightis the property.

< /ul>

Option Key

• Height- This property accepts anumericvalue that allows us to specify The height of the object. Its default value is 100.

Example 1

heightDefault behavior of the property< /p>

Let’s look at a code example Understand the default behavior of the height property.

高度属性的默认行为 请注意，默认三角形的高度为 100。 // 启动画布实例 var canvas = new Fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); 画布.setHeight(250); // 初始化一个三角形对象 var triangle = new Fabric.Triangle({ 左：105， 顶部：70， 宽度：90， 填写：“#746cc0”， 笔画：“#967bb6”， 笔划宽度：5， }); // 将其添加到画布中 canvas.add(三角形);

Copy after login

Example 2

Passing theheightproperty as key

Now we have theheightThe attribute specifies a value of 140px, and we can see its height change.

将高度属性作为键传递 您可以看到三角形的高度现在固定为 140。 // 启动画布实例 var canvas = new Fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); 画布.setHeight(250); // 初始化一个三角形对象 var triangle = new Fabric.Triangle({ 左：105， 顶部：70， 宽度：90， 身高：140， 填写：“#746cc0”， 笔画：“#967bb6”， 笔划宽度：5， }); // 将其添加到画布中 canvas.add(三角形);

Copy after login

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