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 Circle with progress cursor on hover over objects using FabricJS?
In this tutorial, we are going to create a Circle 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. which are reusing the native cursor underhood. The hoverCursor property sets the style of the cursor when hovered over a canvas object.
Syntax
new fabric.Circle({ hoverCursor: String }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. 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. By using this property, we can set the default cursor value when hovering over the circle object on the canvas.
Example 1: Setting Progress Cursor on Hover
By default, when we hover over a circle 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 circle 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>Creating a circle with progress cursor on hover over objects using FabricJS</h2>
<p>Hover the mouse over the object to see the changed shape of the cursor. Here we have used a <b>progress</b> cursor on hover.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 100,
fill: "#b22222",
radius: 50,
stroke: "black",
strokeWidth: 5,
hoverCursor: "progress"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Instance-Specific Hover Cursor
In this example, we are passing the hoverCursor key to the circle 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 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>Creating a circle with progress cursor on hover over objects using FabricJS</h2>
<p>Move the cursor over the objects. You will get to see the <b>progress</b> cursor when you hover the mouse over the left circle. We have not applied the <b>hoverCursor</b> property on the right circle.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 100,
fill: "#b22222",
radius: 50,
stroke: "black",
strokeWidth: 5,
hoverCursor: "progress"
});
var circle2 = new fabric.Circle({
left: 315,
top: 100,
fill: "black",
radius: 50,
stroke: "#8b0000",
strokeWidth: 5
});
// Adding it to the canvas
canvas.add(circle);
canvas.add(circle2);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
The
hoverCursorproperty accepts any valid CSS cursor valueThis property only affects the specific object instance, not all canvas objects
The default hover cursor for FabricJS objects is "move"
Other cursor options include: pointer, crosshair, wait, help, text, and more
Conclusion
The hoverCursor property in FabricJS allows you to customize cursor appearance when hovering over specific objects. This enhances user experience by providing visual feedback for interactive elements on the canvas.
337 Views
