Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a Rectangle with crosshair cursor on hover over objects using FabricJS?
In this tutorial, we are going to create a Rectangle with a crosshair cursor on hover over objects using FabricJS. Crosshair is one of the native cursor styles available which can be used on a FabricJS canvas too. FabricJS provides various types of cursors like default, all-scroll, crosshair, col-resize, row-resize, etc., which 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. The following example demonstrates how you can create a canvas in FabricJS that will show a crosshair cursor when you hover the mouse over the rectangle 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>Passing the hoverCursor Key to the class</h2>
<p>Hover over the rectangle to see the crosshair 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: 125,
top: 90,
width: 170,
height: 70,
strokeWidth: 3,
stroke: "#4169e1",
fill: "pink",
padding: 15,
hoverCursor: "crosshair",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>Example 2
Proof that hoverCursor applies to a specific object
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>Proof that hoverCursor applies to a specific object</h2>
<p>Hover over the rectangle objects. You will get to see the crosshair cursor over the left rectangle, but not on the right one.</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: 50,
top: 90,
width: 170,
height: 70,
strokeWidth: 3,
stroke: "#4169e1",
fill: "pink",
padding: 15,
hoverCursor: "crosshair",
});
var rect2 = new fabric.Rect({
left: 325,
top: 90,
width: 170,
height: 70,
strokeWidth: 3,
stroke: "#ff69b4",
fill: "#fae7b5",
padding: 15,
});
// Add them to the canvas
canvas.add(rect1);
canvas.add(rect2);
</script>
</body>
</html>
155 Views
