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

In this tutorial, we will learn how to make the control corners of a Rectangle transparent using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we must create an instance of the Fabric.Rect class and add it to the canvas. The transparentCorners property allows us to make the control corners of a Rectangle transparent.

Syntax

new Fabric.Rect( {TransparentCorners: Boolean }: 对象）

Parameters

• Options (optional) - This parameter is an object for our Rectangles offer additional customization. Using this parameter, you can change object-related properties such as color, cursor, stroke width, and many other properties. transparentCorners are properties of the object.

ul>

Option Key

• ##transparentCorners - This property accepts a Boolean value that allows us to render the object's control corners transparent. Its default value is true.

Example 1

Passing the transparent Corners property as a key with a value of "false"Let's look at a code Example for creating a rectangular 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 矩形 = 新的布料. 矩形({
左：155，
顶部：70，
宽度：170，
身高：70，
填写：“#f4f0ec”，
笔画：“#2a52be”，
笔划宽度：5，
透明角：假，
});

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

Example 2

Passing the transparent corner as a key with a value of "True"

In this example we are passing the transparent corner to

The transparentCorners property passes a true value. 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 矩形 = 新的布料. 矩形({
左：155，
顶部：70，
宽度：170，
身高：70，
填写：“#f4f0ec”，
笔画：“#2a52be”，
笔划宽度：5，
透明角：真实，
});

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

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