Home > Article > Web Front-end > How to create a rectangle that helps the cursor hover over an object using FabricJS?
How to create a rectangle that helps the cursor hover over an object using FabricJS?
- WBOYforward
- 2023-08-27 23:33:02824browse
In this tutorial, we will use FabricJS to create a rectangle with a help cursor hovering over the object. "help" is one of the native cursor styles available and can also be used in the FabricJS canvas. FabricJS provides various types of cursors such as default, full scroll, crosshair, column resize, row resize, etc. which actually reuse the native cursor under the hood. hoverCursor Property sets the style when the cursor is hovering over the canvas object.
Syntax
new fabric.Rect({ hoverCursor: String }: Object)Parameters
Options (optional) - This parameter is a ## that provides additional customization #Object to our rectangle. Using this parameter, you can change the properties of the object related to the hoverCursor property, such as color, cursor, stroke width, and many other properties.
Option Key
hoverCursor - This property accepts a string that determines the hover The name of the cursor used when resting on the canvas object. Using this we can set the default cursor value when hovering over this rectangular object on the canvas.
Pass the key to hoverCursor class
By default, when we hover the mouse in the canvas When on a rectangular object, the cursor type is "Move". Let's look at a code example of creating a canvas using>help Hover the cursor 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>Example 2
Demonstrate that this only affects instances
In this example we pass thehoverCursor key to the Rectangle class , which means that the hoverCursor property of each object in the canvas will not change. Changes occur only for that single object. The following code example illustrates this -
<!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>
The above is the detailed content of How to create a rectangle that helps the cursor hover over an object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!