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 help cursor on hover over objects using FabricJS?
In this tutorial, we are going to create a Rectangle with a help cursor on hover over objects using FabricJS. "help" is one of the native cursor styles available which can be used in the FabricJS canvas too. FabricJS provides various types of cursors such as default, all-scroll, crosshair, col-resize, row-resize, etc., that actually reuse 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: Passing the hoverCursor Key to the class
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 help 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>Passing the hoverCursor Key to the class</h2>
<p>Hover over the rectangle to see the help 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: "help",
});
// Add them to the canvas
canvas.add(rect);
</script>
</body>
</html>
Output
The above code creates a canvas with a rectangle. When you hover over the rectangle, the cursor changes to a help cursor (question mark icon).
Example 2: Demonstrating that this affects the instance only
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>Demonstrating that it affects the instance only</h2>
<p>Hover over the rectangle objects and observe that the help cursor applies to the left object only. We have not used the <b>hoverCursor</b> property on the right object.</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 rect1 = new fabric.Rect({
left: 55,
top: 90,
width: 170,
height: 70,
fill: "#faf0e6",
padding: 9,
stroke: "#9370db",
strokeWidth: 5,
hoverCursor: "help",
});
// Initiate another rectangle object
var rect2 = new fabric.Rect({
left: 325,
top: 90,
width: 170,
height: 70,
fill: "#9370db",
padding: 9,
stroke: "#e6e6fa",
strokeWidth: 5,
});
// Add them to the canvas
canvas.add(rect1);
canvas.add(rect2);
</script>
</body>
</html>
Output
The above code creates two rectangles on the canvas. When you hover over the left rectangle, the cursor changes to a help cursor. However, hovering over the right rectangle shows the default move cursor since no hoverCursor property was specified for it.
Common Cursor Types
FabricJS supports various cursor types for the hoverCursor property:
- help - Question mark cursor
- pointer - Hand pointer cursor
- crosshair - Cross-shaped cursor
- move - Four-directional arrow cursor
- text - Text selection cursor
- wait - Loading/waiting cursor
Conclusion
The hoverCursor property in FabricJS allows you to customize the cursor appearance when hovering over specific objects. This property affects only the individual object instance and provides better user experience by indicating the object's interactive nature.
222 Views
