How to set background color of triangle selection using FabricJS?

In this tutorial, we will learn how to set the background color of a triangle selection 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 change the size of the object, rotate it or manipulate it when it is actively selected. We can use the selectionBackgroundColor property to change the background color of the triangle selection.

Syntax

new Fabric.Triangle({ SelectionBackgroundColor : String }: Object)

Parameters

• Options< /strong> (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 selectionBackgroundColor is a property, such as color, cursor, stroke width, and many other properties.

< /ul>

Option Key

• selectionBackgroundColor - This property accepts a string value. The assigned value determines the background color of the selection.

Example 1

Default color when selectingBackgroundColor em> Unused property

Let’s look at a code Example of how selections appear when the selectionBackgroundColor property is not used. From this example we can see that the selection area or the area behind the object has no color.

不使用selectionBackgroundColor属性时的默认颜色
可以选择三角形，可以看到选择区域没有颜色。


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：70，
宽度：90，
身高：80，
填写：“#228b22”，
笔画：“#d8e4bc”，
笔画宽度：7，
填充：30，
});

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

Copy after login

Example 2

Passing the selectionBackgroundColor property as a key

In this example we are setting the The selectionBackgroundColor property is assigned a value. In this case, we passed it the hexadecimal value "da70d6", which is magenta, so the selection area looks that color.

将selectionBackgroundColor属性作为键传递
您可以选择三角形以查看选择区域现在具有洋红色


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：70，
宽度：90，
身高：80，
填写：“#228b22”，
笔画：“#d8e4bc”，
笔画宽度：7，
填充：30，
选择背景颜色：“#da70d6”，
});

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

Copy after login

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