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 Triangle using FabricJS?
In this tutorial, we are going to learn how to lock the vertical 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 X-axis. This can be done by using the lockMovementY property.
Syntax
new fabric.Triangle({ lockMovementY: 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 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 Movement Behavior
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 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 Triangle object in the canvas</h2>
<p>You can select the triangle and drag it around. Observe that you can move the object in both horizontal and vertical 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 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>
In this example, you can select and drag the triangle in any direction. Both horizontal and vertical movements are allowed by default.
Example 2: Locking Vertical Movement
In this example, we will see how we can lock the vertical movement of a triangle 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>Passing lockMovementY as key with 'true' value</h2>
<p>You can select and drag around the triangle to see that movement in y-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,
lockMovementY: true,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>
Notice that when you try to drag the triangle, it can only move horizontally. The vertical movement is completely restricted due to the lockMovementY: true property.
Key Points
-
lockMovementYis a Boolean property that controls vertical movement -
Setting it to
trueprevents the object from moving up or down - Horizontal movement remains unaffected
- This property is useful for creating UI elements that should only move along one axis
Conclusion
The lockMovementY property in FabricJS provides precise control over triangle movement by restricting vertical motion while preserving horizontal freedom. This is particularly useful for creating constrained interactive elements.
202 Views
