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 set the border opacity of a Triangle while moving using FabricJS?
In this tutorial, we are going to set the border opacity of a Triangle while moving 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 change the opacity of a triangle while moving it around in the canvas by using the borderOpacityWhenMoving property.
Syntax
new fabric.Triangle({ borderOpacityWhenMoving: Number }: 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 borderOpacityWhenMoving is a property.
Options Keys
-
borderOpacityWhenMoving ? This property accepts a Number that specifies how opaque we want the borders to be while moving the triangle around. It allows us to control the opacity of the borders while moving a triangle object. The default value is 0.4.
Example 1: Default Behavior
Let's see a code example that shows the default behaviour of borderOpacityWhenMoving property. When we select our triangle object and move it around the canvas, the selection border changes its opacity from 1 (fully opaque) to 0.4 which makes it look a bit translucent.
<!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 borderOpacityWhenMoving behavior</h2>
<p>Move the triangle to see the default behavior</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: 60,
width: 100,
height: 70,
fill: "#deb887",
borderColor: "red",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Custom Border Opacity
Let's see a code example to assign a value to the borderOpacityWhenMoving property. In this case we have assigned the value as 0. This tells us that when we move our triangle around, the border opacity will change to 0 and will not be visible.
<!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>Custom borderOpacityWhenMoving value</h2>
<p>Move the triangle to see the border become invisible</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: 60,
width: 100,
height: 70,
fill: "#deb887",
borderColor: "red",
borderOpacityWhenMoving: 0,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Common Values
- 0 - Completely transparent border (invisible)
- 0.4 - Default semi-transparent border
- 1 - Fully opaque border (no transparency)
Conclusion
The borderOpacityWhenMoving property in FabricJS allows you to control the visual feedback when moving triangle objects. Setting it to 0 hides the border completely, while 1 keeps it fully visible during movement.
206 Views
