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
Create a Triangle with Cursor in Fabric.js
In this tutorial, we are going to create a Triangle with a help cursor on moving objects using FabricJS. help 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.
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.
Example 1
Default cursor value when object is moved around the canvas
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.
<!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: "#4682b4",
stroke: "#bcb88a",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2
Passing the moveCursor property as key with a value
In this example, we are passing the moveCursor key to the triangle class with the value as "help". This will make sure that as we move around our object in the canvas, the cursor value is help. 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>Passing the moveCursor property as key with a value</h2>
<p>You can move around the triangle to see that the cursor type is "help".</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: "#4682b4",
stroke: "#bcb88a",
strokeWidth: 5,
moveCursor: "help",
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
175 Views
