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 a Rectangle using FabricJS?
In this tutorial, we are going to learn how to lock the vertical movement of a Rectangle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a rectangle 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.Rect({ lockMovementY: Boolean }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. 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 Behavior of a Rectangle
Let's see a code example to understand how we can move our rectangle object freely in both X-axis and Y-axis when lockMovementY property is not used.
<!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 Rectangle object in the canvas</h2>
<p>Drag the rectangle across the X-axis and Y-axis to see 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 rectangle object
var rect = new fabric.Rect({
left: 55,
top: 90,
width: 170,
height: 70,
fill: "black",
padding: 9,
stroke: "#483d8b",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Output
The rectangle can be dragged freely in both horizontal and vertical directions on the canvas.
Example 2: Locking Vertical Movement
In this example, we will see how we can lock the vertical movement of a rectangle object. By assigning the lockMovementY property a 'true' value, we essentially prevent 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>Rectangle with locked vertical movement</h2>
<p>Drag the rectangle across the X-axis and Y-axis to see that the 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 rectangle object
var rect = new fabric.Rect({
left: 55,
top: 90,
width: 170,
height: 70,
fill: "black",
padding: 9,
stroke: "#483d8b",
strokeWidth: 5,
lockMovementY: true,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Output
The rectangle can only be dragged horizontally (along the X-axis) but not vertically (along the Y-axis).
Key Points
The lockMovementY property only affects vertical movement; horizontal movement remains unrestricted.
Setting lockMovementY: false (or omitting it) allows free movement in both directions.
This property is useful for creating UI elements that should only slide horizontally, like sliders or horizontal scrollbars.
Conclusion
The lockMovementY property in FabricJS provides precise control over rectangle movement by restricting vertical motion while preserving horizontal freedom. This feature is essential for creating controlled interactive elements in canvas applications.
197 Views
