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 corners of a Triangle using FabricJS?
In this tutorial, we are going to learn how to hide the controlling corners 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.
The controlling corners of an object allow us to increase or decrease its scale, stretch or change its position. We can customize our controlling corners in many ways such as adding a specific colour to it, changing its size, etc. We can also hide them using the hasControls property.
Syntax
new fabric.Triangle({ hasControls: 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 hasControls is a property.
Options Keys
-
hasControls ? This property accepts a Boolean value which allows us to display or hide the controlling corners of an actively selected object. Its default value is true.
Example 1: Default Appearance of Controlling Corners
Let's see a code example that shows the default appearance of controlling corners. Since the default value of hasControls property is True, the controlling corners will be visible when you select the triangle.
<!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 corners</h2>
<p>Select the triangle to see its controlling corners</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 Controlling Corners
In this example, we will see how the controlling corners are hidden by using the hasControls property. We need to assign the hasControls key a 'false' value. By doing that, the controlling corners will be hidden when you select the triangle.
<!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 hasControls as key and assigning it "false"</h2>
<p>Select the triangle and observe that its controlling corners are 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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#ff878d",
stroke: "#674846",
strokeWidth: 5,
hasControls: false,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The
hasControlsproperty is a boolean that controls the visibility of selection handles - Setting
hasControls: falsecompletely hides all corner controls - This property affects only the visual appearance of controls, not the object's selectability
- Other control-related properties like
hasBorderswork independently
Conclusion
The hasControls property in FabricJS provides a simple way to hide the controlling corners of Triangle objects. Set it to false to create cleaner interfaces where users can select objects without seeing resize handles.
194 Views
