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 make the controlling corners of a Triangle transparent using FabricJS?
In this tutorial, we are going to learn how to make the controlling corners of Triangle transparent 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 transparentCorners property allows us to make the controlling corners of Triangle transparent.
Syntax
new fabric.Triangle( { transparentCorners: 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 transparentCorners is a property.
Option Keys
-
transparentCorners ? This property accepts a Boolean value which allows us to render the controlling corners of an object as transparent or not transparent. Its default value is true.
Example 1: Opaque Controlling Corners
Let's see a code example to create a triangle object with controlling corners that are not transparent. To achieve this, we need to pass the transparentCorners property a false value.
<!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 transparentCorners property as key with a 'false' value</h2>
<p>You can select the triangle to see that the controlling corners are opaque.</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: 180,
top: 80,
width: 90,
height: 80,
fill: "#b0e0e6",
stroke: "#5f9ea0",
strokeWidth: 7,
transparentCorners: false,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Transparent Controlling Corners
In this example, we are passing the transparentCorners property a true value. This will make sure that the controlling corners are rendered as transparent. Note that this is also the default behaviour.
<!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 transparentCorners as key with a 'true' value</h2>
<p>You can select the triangle to see that the controlling corners are transparent.</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: 180,
top: 80,
width: 90,
height: 80,
fill: "#b0e0e6",
stroke: "#5f9ea0",
strokeWidth: 7,
transparentCorners: true,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Key Points
- The transparentCorners property controls the visibility of object selection corners
- When set to
true(default), corners appear transparent - When set to
false, corners appear opaque with solid background - This property is useful for customizing the user interface experience when selecting objects
Conclusion
The transparentCorners property in FabricJS provides control over the appearance of triangle selection corners. Setting it to false creates opaque corners, while true maintains the default transparent appearance.
182 Views
