Home > Article > Web Front-end > How to hide the control border of a rectangle using FabricJS?
How to hide the control border of a rectangle using FabricJS?
- WBOYforward
- 2023-08-23 15:49:02936browse
In this tutorial, we will learn how to hide the control border of a rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we need to create an instance of the fabric.Rect class and add it to the canvas.
We can customize the control border in many ways, such as adding a specific color to it, a dotted line mode, etc. However, we can also eliminate the borders entirely by using the hasBorders property.
Syntax
new fabric.Rect({ hasBorders: Boolean }: Object)Parameters
Options (optional) − This parameter is an object, Used to provide additional customizations for the rectangle. Using this parameter, you can change the color, cursor, stroke width, and many other properties related to objects with border properties.
Option key
hasBorders − This property accepts a boolean value. When set to false, the control borders will will not be rendered. It helps with rendering control borders. The default value is true.
Example 1
Rectangle object controls the default appearance of the border
Let's look at a code example showing the control of a rectangle The default appearance of the border. Since the default value of the hasBorders property is True, borders are rendered when a rectangular object is selected.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance of controlling borders of a rectangle object</h2>
<p>Select the rectangle to see the default appearance of controlling borders</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
strokeWidth: 3,
stroke: "#4169e1",
fill: "grey",
padding: 15,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>Example 2
Use hasBorders as the key and assign it a value of "false"
If the hasBorders attribute is assigned a false value, the border will not be rendered again. This means that when we select the rectangular object, the control border will be hidden.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing hasBorders as key and assigning a False value to it</h2>
<p>Select the rectangle to see that the controlling borders have now been hidden</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
strokeWidth: 3,
stroke: "#4169e1",
fill: "grey",
padding: 15,
hasBorders: false,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>The above is the detailed content of How to hide the control border of a rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!