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 vertical movement of Textbox using FabricJS?
In this tutorial, we are going to learn how to lock the vertical 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 X-axis. This can be done by using the lockMovementY property.
Syntax
new fabric.Textbox(text: String, { lockMovementY: 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 lockMovementY is a property.
Options Keys
-
lockMovementY ? 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 vertical direction.
Example 1: Default Behaviour of a Textbox Object
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 lockMovementY 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 or 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("If you're not confused, you're not paying attention.", {
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: Passing lockMovementY as Key with "true" Value
In this example, we will see how we can lock the vertical movement of a textbox object. By assigning the lockMovementY property a "true" value, we essentially cease movement in the vertical direction.
<!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 lockMovementY as key with "true" value</h2>
<p>Drag the Textbox across the X-axis or Y-axis and observe that movement is no longer allowed in the vertical 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("If you're not confused, you're not paying attention.", {
backgroundColor: "#fffff0",
width: 400,
left: 110,
top: 70,
fill: "violet",
strokeWidth: 2,
stroke: "pink",
textAlign: "center",
lockMovementY: true,
});
// Add it to the canvas
canvas.add(textbox);
</script>
</body>
</html>
Key Points
-
The
lockMovementYproperty controls vertical movement restriction for Textbox objects. -
When set to
true, the textbox can only move horizontally along the X-axis. -
This property is useful for creating interfaces where elements should maintain their vertical alignment.
Conclusion
The lockMovementY property in FabricJS provides precise control over textbox movement by restricting vertical dragging while preserving horizontal movement capabilities. This feature is essential for maintaining layout constraints in interactive canvas applications.
298 Views
