How to make triangle invisible using FabricJS?

In this tutorial, we will learn how to make a triangle invisible 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.

Our triangle object can be customized in many ways, such as changing its dimensions, adding a background color, or making it visible or invisible. We can do this by using the visible attribute.

Syntax

 new Fabric.Triangle( {visible: Boolean }: Object)

Parameters

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

Options Keys

• visible - This property accepts a boolean value, allowing us to An object is rendered onto the canvas. Its default value is true.

Example 1

Pass the visible attribute as a key with "true" value

Let's look at a code example to understand what happens when we pass a true value to a visible property. By specifying a value of "true" we ensure that the triangle object is rendered to the canvas. This is also the default behavior in FabricJS.

将可见属性作为具有“true”值的键传递
您可以看到三角形对象已渲染到画布上


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：60，
顶部：80，
填写：“#b0e0e6”，
身高：90，
宽度：100，
});

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

Example 2

Passing the visible attribute as a key with a value of "false"

In this example, We pass the visible attribute as a key with a false value. Assigning a false value will ensure that our triangle object does not render to the canvas. It just doesn't make the object "invisible" but gets rid of it completely. It can be used to remove an object from the canvas without removing its code.

将可见属性作为带有“false”值的键传递
您可以看到三角形对象尚未渲染到画布上。


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：60，
顶部：80，
填写：“#b0e0e6”，
身高：90，
宽度：100，
可见：假，
});

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

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