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 help cursor on hover over objects using FabricJS?
In this tutorial, we will learn how to create a Circle with a help cursor on hover using FabricJS. The help cursor is one of the native cursor styles available which can be used in FabricJS canvas. FabricJS provides various cursor types like default, all-scroll, crosshair, col-resize, and row-resize, all reusing native cursor styles. The hoverCursor property controls the cursor style when hovering over a canvas object.
Syntax
new fabric.Circle({ hoverCursor: String }: Object)
Parameters
-
options (optional) ? An Object providing additional customizations for the circle. Properties like color, cursor, stroke width, and many others can be modified, including the hoverCursor property.
Options Keys
-
hoverCursor ? Accepts a String that determines the cursor name to use when hovering over the canvas object. This property sets the cursor value when hovering over the circle object.
Example 1: Basic Help Cursor Implementation
By default, hovering over a circle object shows a "move" cursor. Let's create a canvas with a help cursor when hovering over a circle object.
<!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 help cursor on hover using FabricJS</h2>
<p>Hover the mouse over the circle to see the help cursor.</p>
<canvas id="canvas"></canvas>
<script>
// Initialize 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: "help"
});
// Add circle to canvas
canvas.add(circle);
canvas.setWidth(400);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Object-Specific Cursor Behavior
The hoverCursor property affects only the specific object instance. In this example, we create two circles where only the left circle has the help cursor, while the right circle uses the default hover behavior.
<!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>Object-specific cursor behavior in FabricJS</h2>
<p>Hover over both circles. The left circle shows a help cursor, while the right circle shows the default move cursor.</p>
<canvas id="canvas"></canvas>
<script>
// Initialize canvas instance
var canvas = new fabric.Canvas("canvas");
// Circle with help cursor
var circle1 = new fabric.Circle({
left: 115,
top: 100,
fill: "#b22222",
radius: 50,
stroke: "black",
strokeWidth: 5,
hoverCursor: "help"
});
// Circle with default cursor
var circle2 = new fabric.Circle({
left: 315,
top: 100,
fill: "black",
radius: 50,
stroke: "#8b0000",
strokeWidth: 5
});
// Add circles to canvas
canvas.add(circle1);
canvas.add(circle2);
canvas.setWidth(500);
canvas.setHeight(250);
</script>
</body>
</html>
Common Use Cases
The help cursor is typically used for objects that provide additional information or assistance when interacted with. Other useful cursor options in FabricJS include:
- pointer ? For clickable elements
- crosshair ? For drawing or targeting
- grab/grabbing ? For draggable elements
- not-allowed ? For disabled interactions
Conclusion
The hoverCursor property in FabricJS allows you to customize cursor behavior for individual objects. Use the help cursor to indicate that an object provides assistance or additional information when hovered over.
258 Views
