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 an Ellipse with crosshair cursor on hover over objects using FabricJS?
In this tutorial, we are going to create an Ellipse with a crosshair cursor on hover over objects using FabricJS. crosshair 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.Ellipse({ hoverCursor: String }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, 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 ellipse object on the canvas.
Example 1: Basic Crosshair Cursor
By default, when we hover over an ellipse object in the canvas, the cursor type is move. Let's see how to create a canvas with a crosshair cursor while hovering over an ellipse 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 an ellipse with crosshair cursor on hover over objects using FabricJS?</h2>
<p> Hover the mouse over the ellipse to see the crosshair cursor.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 100,
top: 100,
fill: "#a2006d",
rx: 80,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
hoverCursor: "crosshair",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Object-Specific Hover Cursor
In this example, we are passing the hoverCursor key to the ellipse 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. Notice how only the left ellipse shows the crosshair cursor while the right one maintains the default cursor 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>Creating an Ellipse with crosshair cursor on hover over objects using FabricJS?</h2>
<p>Hover the mouse over the left ellipse to see the crosshair cursor. We haven't applied the hoverCursor property to the right ellipse.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance with crosshair cursor
var ellipseOne = new fabric.Ellipse({
left: 90,
top: 100,
fill: "white",
rx: 80,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
hoverCursor: "crosshair",
});
// Initiate another ellipse instance without hover cursor
var ellipseTwo = new fabric.Ellipse({
left: 280,
top: 100,
fill: "#a2006d",
rx: 80,
ry: 50,
});
// Add them to the canvas
canvas.add(ellipseOne);
canvas.add(ellipseTwo);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The
hoverCursorproperty only affects the specific object it's applied to - FabricJS supports all native CSS cursor values including crosshair, pointer, move, etc.
- The default hover cursor for canvas objects is typically "move"
- You can apply different hover cursors to different objects on the same canvas
Conclusion
The hoverCursor property in FabricJS provides an easy way to customize user interaction feedback. By setting it to "crosshair", you can create more intuitive interfaces where users understand they can interact with specific canvas objects.
236 Views
