How to set opacity of triangle using FabricJS?

#In this tutorial, we will learn how to set the opacity 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 customize the triangle object by adding a fill color, removing its borders, and even changing its dimensions. Likewise, we can also use the opacity property to change its opacity.

Syntax

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

Parameters

• Options (optional) - This parameter is a Object, which provides additional customization to our triangle. Using this parameter, you can change the color, cursor, border width and many other properties related to objects whose opacity is an attribute.

Option Key

• Opacity − This property accepts numbersAs a value that allows us to control the opacity of the object. The default value of the opacity attribute is 1.

Example 1

Default appearance of the Triangle object

Let's look at a code example and look at our Triangle object What it looks like when using the default value of the opacity property. We are not passing any opacity key to the class as shown in the following example -

三角形对象的默认外观
请注意，三角形是完全不透明的。


// 启动画布实例
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 opacity property as key

In this example we will see how assigning a value to the opacity property changes the opacity of a triangle object in the canvas. Here we are using 0.3 as the opacity, which makes our triangle object look semi-transparent instead of completely opaque.

将不透明度属性作为键传递
你可以看到我们的三角形并不是完全不透明


// 启动画布实例
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，
不透明度：0.3，
});

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

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