Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 an Ellipse with text cursor on hover over objects using FabricJS?
In this tutorial, we are going to create an Ellipse with a text cursor on hover over objects using FabricJS. text 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
Passing the hoverCursor Key to the class
By default, when we hover over an ellipse object in the canvas, the cursor type is "move". Let's see a code to create a canvas with a text 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 text cursor on hover over objects using FabricJS</h2> <p>Hover the mouse over the object to see the <b>text</b> 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: 115, top: 100, fill: "white", rx: 80, ry: 50, stroke: "black", strokeWidth: 5, hoverCursor: "text", }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html> Example 2
Demonstrating that this effects the instance only
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.
<!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 text cursor on hover over objects using FabricJS</h2> <p>Hover the mouse over the objects. You will get to see the <b>text</b> cursor on the left ellipse. We haven't applied the <b>hoverCursor</b> property on the right ellipse. </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipseOne = new fabric.Ellipse({ left: 115, top: 100, fill: "white", rx: 80, ry: 50, stroke: "black", strokeWidth: 5, hoverCursor: "text", }); // Initiate another ellipse instance var ellipseTwo = new fabric.Ellipse({ left: 335, top: 100, rx: 80, ry: 50, fill: "#b22222", }); // Add them to the canvas canvas.add(ellipseOne); canvas.add(ellipseTwo); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
220 Views
