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. ThetransparentCornersproperty allows us to make the control corners of the triangle transparent.

Syntax

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

Parameters

• Options(optional)- This parameter is aObject, which provides additional customization to our triangle. Using this parameter, you can change properties related to the object for whichtransparentCornersis a property, such as color, cursor, stroke width, and many other properties.

< /ul>

Option Key

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

Example 1

Passing thetransparentCornersattribute 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 thetransparentCornersproperty.

将透明角属性作为具有“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(三角形);

Copy after login

Example 2

PassingtransparentCornersas a key with a value of "true"

In this example we Pass a true value to thetransparentCornersproperty. 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(三角形);

Copy after login

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!