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 Triangle using FabricJS?
In this tutorial, we are going to learn how to hide the controlling borders of a Triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we will have to create an instance of fabric.Triangle 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. We can also eliminate the borders completely by using the hasBorders property.
Syntax
new fabric.Triangle({ hasBorders: Boolean }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our Triangle. 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 helps to render the controlling borders. When set to False, the controlling borders will not be rendered. 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 Triangle. Since the default value of hasBorders property is True, the borders are rendered on selecting the triangle 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 the controlling borders of a triangle object</h2>
<p>Select the triangle to see its 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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#ff878d",
stroke: "#674846",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Hiding Borders with hasBorders Property
If the hasBorders property is assigned a False value, the borders will no longer be rendered. This means that when we select our triangle 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 it "false"</h2>
<p>Select the triangle and observe that its controlling borders have not been rendered.</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#ff878d",
stroke: "#674846",
strokeWidth: 5,
hasBorders: false,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The hasBorders property controls the visibility of selection borders around triangle objects
- Default value is
true, which shows borders when the triangle is selected - Setting
hasBorders: falsecompletely hides the controlling borders - This property is useful when you want clean triangle objects without visual selection indicators
Conclusion
The hasBorders property in FabricJS provides an easy way to hide controlling borders of triangle objects. By setting it to false, you can create cleaner canvas interfaces without selection borders.
188 Views
