How to make the control corners of a triangle transparent using FabricJS?

#In this tutorial, we will learn how to make the control corners of a triangle transparent 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. The transparentCorners property allows us to make the control corners of the triangle transparent.

Syntax

new Fabric.Triangle( {透明Corners: Boolean }: Object)

Parameters

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

Option Key

• transparentCorners - This property accepts a boolean value, allowing us to The object's control corners are rendered transparent or opaque. Its default value is true.

Example 1

Passing the transparentCorners attribute as a key with "false" value

Let's look at a code example for creating a triangle object with opaque control corners. To do this, we need to pass a false value to the transparentCorners property.

将透明角属性作为具有“false”值的键传递
您可以选择三角形以查看控制角是否不透明。


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：80，
宽度：90，
身高：80，
填写：“#b0e0e6”，
笔画：“#5f9ea0”，
笔画宽度：7，
透明角：假，
});

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

Example 2

Passing transparentCorners as a key with a value of "true"

In this example we Pass a true value to the transparentCorners property. This will ensure that the control corners are rendered transparent. Note that this is also the default behavior.

将透明角作为具有“true”值的键传递
您可以选择三角形以查看控制角是否透明。


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：80，
宽度：90，
身高：80，
填写：“#b0e0e6”，
笔画：“#5f9ea0”，
笔画宽度：7，
透明角：真实，
});

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

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