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 the width and height properties.

Syntax

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

Parameters

• < p>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 an object whose height is the property.

< /ul>

Option Key

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

Example 1

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

Example 2

Passing the height property as key

Now we have the height The 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(三角形);

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!