Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to hide the controlling borders of a Rectangle using FabricJS?
In this tutorial, we are going to learn how to hide the controlling borders of a Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we will have to create an instance of fabric.Rect class and add it to the canvas.
We can customize our controlling borders in many ways such as adding a specific colour to it, a dash pattern, etc. However, we can also eliminate the borders completely by using the hasBorders property.
Syntax
new fabric.Rect({ hasBorders: Boolean }: Object)
Parameters
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which hasBorders is a property.
Options Keys
hasBorders ? This property accepts a Boolean value which when set to false, the controlling borders will not be rendered. It helps to render the controlling borders. The default value is true.
Example 1: Default Appearance of Controlling Borders
Let's see a code example that shows the default appearance of controlling borders of a Rectangle. Since the default value of hasBorders property is True, the borders are rendered on selecting the rectangle object.
<!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: Hiding Controlling Borders
If the hasBorders property is assigned a false value, the borders will no longer be rendered. This means that when we select our rectangle object, the controlling borders 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>
Key Points
- The
hasBordersproperty controls the visibility of selection borders around FabricJS objects - Setting
hasBorders: falsecompletely hides the controlling borders when the object is selected - This property is useful when you want to create a cleaner interface without visual selection indicators
- The default value is
true, which shows the borders on object selection
Conclusion
The hasBorders property in FabricJS provides an easy way to hide controlling borders of rectangle objects. Set it to false to create a cleaner selection experience without visible border controls.
666 Views
