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 Textbox with progress cursor on moving objects using FabricJS?
In this tutorial, we are going to create a Textbox with a progress cursor on moving objects using FabricJS. progress 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 under the hood. The moveCursor property sets the style of the cursor when the object is moved around in the canvas.
Syntax
new fabric.Textbox(text: String, { moveCursor: String }: Object)
Parameters
-
text ? This parameter accepts a String which is the text string that we want to display inside our textbox.
-
options (optional) ? This parameter is an Object which provides additional customizations to our textbox. Using this parameter 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 textbox object on the canvas. The value determines the type of the cursor to be used on moving the canvas object.
Example 1: Default Cursor Behavior
By default, when we move around a textbox object in the canvas, the cursor type is move. Let's see a code example to understand this 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>Move the cursor around the textbox and observe 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 textbox object
var textbox = new fabric.Textbox("Do it with passion or not at all.", {
backgroundColor: "#fffff0",
width: 400,
left: 110,
top: 70,
fill: "#e1a95f",
strokeWidth: 2,
stroke: "#a40000",
textAlign: "center",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2: Using Progress Cursor
In this example, we are passing the moveCursor property with the value "progress". This will change the cursor to a progress indicator when moving the textbox object around the canvas.
<!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>Move the cursor around the textbox and observe that the cursor type has now changed to "progress"</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 textbox object
var textbox = new fabric.Textbox("Do it with passion or not at all.", {
backgroundColor: "#fffff0",
width: 400,
left: 110,
top: 70,
fill: "#e1a95f",
strokeWidth: 2,
stroke: "#a40000",
textAlign: "center",
moveCursor: "progress",
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Available Cursor Types
FabricJS supports various cursor types that can be used with the moveCursor property:
- default - Standard arrow cursor
- move - Four-directional move cursor (default)
- progress - Progress/busy indicator
- crosshair - Crosshair cursor
- pointer - Hand pointer cursor
- grab - Open hand cursor
Conclusion
The moveCursor property in FabricJS allows you to customize the cursor appearance when moving textbox objects. By setting it to "progress", you can provide visual feedback indicating an ongoing operation or loading state.
209 Views
