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 Triangle with crosshair cursor on moving objects using FabricJS?
In this tutorial, we are going to create a Triangle with a crosshair cursor on moving objects using FabricJS. The 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 that reuse the native cursor under the hood.
The moveCursor property sets the style of the cursor when the object is moved around in the canvas. This property is useful for providing visual feedback to users about the current interaction state.
Syntax
new fabric.Triangle({ moveCursor: String }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. 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 moveCursor is a property.
Options Keys
-
moveCursor ? This property accepts a String which allows us to set the default cursor value when moving this triangle object on the canvas. The value determines the type of the cursor to be used on moving the canvas object. Common values include "move", "crosshair", "pointer", "grab", etc.
Example 1: Default Cursor Behavior
By default, when we move around a triangle object in the canvas, the cursor type is move. Let's see a code example to understand this default 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>Default cursor value when object is moved around the canvas</h2>
<p>You can move around the triangle to see that the default cursor type is "move"</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#eedc82",
stroke: "#bcb88a",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Setting Crosshair Cursor
In this example, we are passing the moveCursor property to the triangle class with the value "crosshair". This will make sure that as we move around our object in the canvas, the cursor changes to a crosshair style, providing a different visual indication during object movement.
<!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 moveCursor property with crosshair value</h2>
<p>You can move around the triangle to see that the cursor type is "crosshair"</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 triangle object with crosshair cursor
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#eedc82",
stroke: "#bcb88a",
strokeWidth: 5,
moveCursor: "crosshair",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Available Cursor Types
FabricJS supports various cursor types that can be used with the moveCursor property:
- move - Default cursor for moving objects
- crosshair - Cross-shaped cursor for precision
- pointer - Hand pointer cursor
- grab - Open hand cursor
- grabbing - Closed hand cursor
- all-scroll - Four-directional scroll cursor
Conclusion
The moveCursor property in FabricJS allows you to customize the cursor appearance when moving objects on the canvas. Using "crosshair" provides users with a precision cursor that's particularly useful for detailed positioning tasks.
286 Views
