How to make a rectangle invisible using FabricJS?-JS Tutorial-php.cn

How to make a rectangle invisible using FabricJS?

PHPz

Release： 2023-09-22 13:01:07

forward

888 people have browsed it

如何使用 FabricJS 使矩形不可见？

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

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

Syntax

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

Parameters< /h2>
Options (optional) - This parameter is an Object Provides additional customization to our rectangle. Using this parameter, you can change the color, cursor, stroke width, and other properties related to the object whose property is visible.

Options keys

visible - This property accepts a Boolean value that allows us to render the object onto the canvas. Its default value is true.

Example 1

Pass visible Property as key with 'true' value

Let's see a code example to understand what happens when we pass visible The true value of a property. By specifying the value as "True" we ensure that our A rectangular object is rendered onto the canvas. This is also the default behavior FabricJS.

<!DOCTYPE html>
<html>
<head>
<!--Add Fabric JS library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Pass visible properties as keys with a value of 'True'</h2>
<p>You can see that the rectangular object has been rendered on the canvas. </p>
<canvas id="canvas"></canvas>
<script>
//Start the canvas instance
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);

//Initialize a rectangle object
var rectangle = new cloth. rectangle({
Left: 55,
Top: 60,
Width: 170,
Height: 70,
Fill in: "#f4f0ec",
Stroke: "#2a52be",
Stroke width: 5,
Visible: real,
});

//Add it to the canvas
canvas.add(rectangle);
</script>
</body>
</html>

Example

Passing visible properties as keys using a 'False' value

< ;p>In this example, we pass the visible attribute as a key with a value of false. Specifying a false value will ensure that our rectangle 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 deleting its code.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Pass visible properties as keys with a value of 'False'</h2> <p>You can see that the rectangular object has not been rendered to the canvas. </p> <canvas id="canvas"></canvas> <script> //Start the canvas instance var canvas = new Fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); //Initialize a rectangle object var rectangle = new cloth. rectangle({ Left: 55, Top: 60, Width: 170, Height: 70, Fill in: "#f4f0ec", Stroke: "#2a52be", Stroke width: 5, Visible: false, }); //Add it to the canvas canvas.add(rectangle); </script> </body> </html>
The above is the detailed content of How to make a rectangle invisible using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!