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 Rectangle using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal 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 Y-axis. This can be done by using the lockMovementX property.
Syntax
new fabric.Rect({ lockMovementX: 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 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 Rectangle Movement
Default behaviour of a Rectangle object in the canvas
Let's see a code example to understand how we can move our rectangle 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 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>
Example 2: Locking Horizontal Movement
Passing lockMovementX as key with a True value
In this example, we will see how we can lock the horizontal movement of a rectangle 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/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing lockMovementX as key with a True value</h2>
<p>Drag the rectangle across the X-axis and Y-axis, and observe that its movement is restricted 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 rectangle object
var rect = new fabric.Rect({
left: 55,
top: 90,
width: 170,
height: 70,
fill: "black",
padding: 9,
stroke: "#483d8b",
strokeWidth: 5,
lockMovementX: true,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Key Differences
| Property Value | Horizontal Movement | Vertical Movement |
|---|---|---|
lockMovementX: false (default) |
Allowed | Allowed |
lockMovementX: true |
Locked | Allowed |
Conclusion
The lockMovementX property in FabricJS allows you to restrict rectangle movement to the vertical axis only. Set it to true to prevent horizontal dragging while maintaining vertical movement freedom.
499 Views
