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 a Triangle using FabricJS?
In this tutorial, we are going to learn how to lock the horizontal movement of a Triangle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a Triangle 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.Triangle({ lockMovementX: Boolean }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our triangle. 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
Default behaviour of a Triangle object in the canvas
Let's see a code example to understand how we can move our triangle 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 Triangle object in the canvas</h2>
<p>Select and drag the triangle around to see that its movement in both X-direction and Y-direction is feasible.</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#ffc1cc",
stroke: "#fbaed2",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Example 2: Locking Horizontal Movement
Passing lockMovementX as key with 'true' value
In this example, we will see how we can lock the horizontal movement of a triangle object. By assigning the lockMovementX property a 'true' value, we essentially cease its 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 'true' value</h2>
<p>Select the triangle and drag it around to see that its movement in the X-direction is no longer allowed.</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#ffc1cc",
stroke: "#fbaed2",
strokeWidth: 5,
lockMovementX: true,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
How It Works
The lockMovementX property restricts movement along the horizontal (X) axis while allowing vertical (Y) movement. When set to true, users can still select and drag the triangle, but it will only move up and down, maintaining its horizontal position.
Key Points
- Default value of
lockMovementXisfalse, allowing free horizontal movement - Setting
lockMovementX: trueprevents horizontal dragging while preserving vertical movement - This property is useful for creating UI elements that should remain aligned vertically
- The triangle remains selectable and can still be modified through other means
Conclusion
The lockMovementX property in FabricJS provides precise control over triangle movement by restricting horizontal dragging while maintaining vertical mobility. This is particularly useful for creating constrained user interfaces and aligned design elements.
195 Views
