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 create a Rectangle with progress cursor on hover over objects using FabricJS?
In this tutorial, we are going to create a Rectangle with a progress cursor on hover over objects using FabricJS. progress is one of the native cursor styles available which can be used in the FabricJS canvas too. FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize, etc., that actually use the native cursor under the hood. The hoverCursor property sets the style of the cursor when hovered over a canvas object.
Syntax
new fabric.Rect({ hoverCursor: String }: 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 hoverCursor is a property.
Options Keys
hoverCursor ? This property accepts a String which determines the name of the cursor to be used on hovering over the canvas object. Using this, we can set the default cursor value when hovering over this rectangle object on the canvas.
Example 1: Setting Progress Cursor
By default, when we hover over a rectangle object in the canvas, the cursor type is move. Let's see a code example to create a canvas with a progress cursor while hovering over a rectangle object in FabricJS.
<!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>Rectangle with Progress Cursor</h2>
<p>Hover over the rectangle to see the progress cursor</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: 55,
top: 90,
width: 170,
height: 70,
fill: "#faf0e6",
padding: 9,
stroke: "#9370db",
strokeWidth: 5,
hoverCursor: "progress",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Instance-Specific Cursor
In this example, we are passing the hoverCursor key to the rectangle class which means that The hoverCursor property would not be changed for every object in the canvas. Changes will only occur for that single object. This is illustrated in the code example below:
<!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>Instance-Specific Hover Cursor</h2>
<p>
Hover over the rectangle objects and observe that the progress cursor applies to the left rectangle only.
The right rectangle uses the default cursor.
</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 with progress cursor
var rect1 = new fabric.Rect({
left: 55,
top: 90,
width: 170,
height: 70,
fill: "#faf0e6",
padding: 9,
stroke: "#9370db",
strokeWidth: 5,
hoverCursor: "progress",
});
// Initiate another rectangle object without custom cursor
var rect2 = new fabric.Rect({
left: 325,
top: 90,
width: 170,
height: 70,
fill: "#9370db",
padding: 9,
stroke: "#ffffff",
strokeWidth: 5,
});
// Add them to the canvas
canvas.add(rect1);
canvas.add(rect2);
</script>
</body>
</html>
Available Cursor Types
FabricJS supports various cursor types that you can use with the hoverCursor property:
- default - Standard arrow cursor
- move - Four-way arrow for moving objects
- progress - Indicates an operation is in progress
- crosshair - Precision selection cursor
- pointer - Hand pointer for clickable elements
- help - Question mark cursor for help
Conclusion
The hoverCursor property in FabricJS allows you to customize the cursor appearance when hovering over canvas objects. This enhances user experience by providing visual feedback and can indicate the type of interaction available with specific objects.
244 Views
