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 lock the horizontal movement of Textbox using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal movement of a Textbox using FabricJS. Just as we can specify the position, colour, opacity and dimension of a textbox object in the canvas, we can also specify whether we want it to move only in the Y-axis. This can be done by using the lockMovementX property.
Syntax
new fabric.Textbox(text: String, { lockMovementX: Boolean }: 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, properties such as colour, cursor, stroke width, and a lot of other properties can be changed related to the object of which lockMovementX is a property
Options Keys
lockMovementX ? This property accepts a Boolean value. If we assign it a 'true' value, then the object will no longer be able to move in the horizontal direction.
Example 1: Default Behavior of Textbox
Let's see a code example to understand how we can move our textbox object in the X-axis or the Y-axis freely when lockMovementX property is not assigned a "true" value.
<!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 behaviour of a Textbox object in the canvas</h2>
<p>Drag the textbox across the X-axis and Y-axis and observe that movement is allowed in both directions.</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("Time is the soul of this world.", {
backgroundColor: "#fffff0",
width: 400,
left: 110,
top: 70,
fill: "violet",
strokeWidth: 2,
stroke: "pink",
textAlign: "center"
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Example 2: Locking Horizontal Movement
In this example, we will see how we can lock the horizontal movement of a textbox object. By assigning the lockMovementX property a "true" value, we essentially cease movement in the horizontal direction.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing lockMovementX as key with "true" value</h2>
<p>Drag the Textbox across the X-axis and Y-axis and observe that movement is no longer allowed in the horizontal direction</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("Time is the soul of this world.", {
backgroundColor: "#fffff0",
width: 400,
left: 110,
top: 70,
fill: "violet",
strokeWidth: 2,
stroke: "pink",
textAlign: "center",
lockMovementX: true
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Key Points
The lockMovementX property accepts a Boolean value (true/false), not a string
When set to
true, the textbox can only move vertically (Y-axis)The textbox remains selectable and can still be resized, rotated, or edited
This property is useful for creating UI elements that should maintain their horizontal position
Conclusion
The lockMovementX property in FabricJS provides precise control over textbox movement by restricting horizontal dragging while preserving vertical movement. This feature is essential for creating structured layouts where elements need to maintain specific horizontal alignment.
205 Views
