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 Rectangle while moving using FabricJS?
In this tutorial, we are going to set the border opacity of a Rectangle while moving 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 change the opacity of a rectangle while moving it around in the canvas by using the borderOpacityWhenMoving property. This property controls how transparent or opaque the selection border appears during the move operation.
Syntax
new fabric.Rect({ borderOpacityWhenMoving: Number }: 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 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 rectangle around. It allows us to control the opacity of the borders while moving a rectangle object. The default value is 0.4. Values range from 0 (completely transparent) to 1 (fully opaque).
Example 1: Default Border Opacity Behavior
Let's see a code example that shows the default behaviour of borderOpacityWhenMoving property. When we select our rectangle object and move it around the canvas, the selection border changes its opacity from 1 (fully opaque) to 0.4 which makes it look 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>Displaying the default behaviour of borderOpacityWhenMoving property</h2>
<p>Move the rectangle to see the default behaviour of <b>borderOpacityWhenMoving</b></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,
fill: "#cf1020",
padding: 9,
borderColor: "black"
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Custom Border Opacity
Let's see a code example to assign a custom value to the borderOpacityWhenMoving property. In this case, we have assigned the value as 0. This means when we move our rectangle around, the border opacity will change to 0 making the border completely invisible during movement.
<!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 borderOpacityWhenMoving as key</h2>
<p>Move the rectangle to see the change in value of <b>borderOpacityWhenMoving</b></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,
fill: "#cf1020",
padding: 9,
borderColor: "black",
borderOpacityWhenMoving: 0
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Key Points
- The borderOpacityWhenMoving property only affects the border opacity during movement, not when the object is stationary
- Values range from 0 (invisible) to 1 (fully opaque), with 0.4 being the default
- This property helps improve user experience by providing visual feedback during drag operations
Conclusion
The borderOpacityWhenMoving property in FabricJS provides fine control over the visual appearance of rectangle borders during movement operations. By adjusting this property, you can create more intuitive and visually appealing canvas interactions.
259 Views
