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 skewing of a Circle using FabricJS?
In this tutorial, we are going to learn how to lock the vertical skewing of a Circle using FabricJS. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also specify whether we want to stop skewing an object vertically. This can be done by using the lockSkewingY property.
Syntax
new fabric.Circle({ lockSkewingY : Boolean }: Object)
Parameters
-
options (optional) ? This parameter is an Object which provides additional customizations to our circle. 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 lockSkewingY is a property.
Options Keys
-
lockSkewingY ? This property accepts a Boolean value. If we assign it a 'true' value, then the object's vertical skewing will be locked.
Example 1: Default Behaviour
Default behaviour of a Circle object in the canvas
Let's see a code example to understand the default behaviour of a Circle object when lockSkewingY property is not used. Skewing the object in both horizontal and vertical directions is feasible by pressing the shift key and then dragging along the horizontal or 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>Default Circle Skewing Behavior</h2>
<p>Select the object, hold the <b>shift</b> key, and stretch it horizontally or vertically. The object will get skewed freely.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
fill: "white",
radius: 50,
stroke: "black",
strokeWidth: 5
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Locking Vertical Skewing
Passing lockSkewingY as key with 'true' value
In this example we will see how we can cease the ability of a circle object to skew vertically using the lockSkewingY property. As we can see, although we can skew the circle object horizontally by pressing the Shift Key, we are not allowed to perform the same action vertically.
<!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>Locking Vertical Skewing of Circle</h2>
<p>Select the object, hold the <b>shift</b> key, and try to stretch the circle. You will notice that horizontal skewing works, but vertical skewing is locked.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
fill: "white",
radius: 50,
stroke: "black",
strokeWidth: 5,
lockSkewingY: true
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
The
lockSkewingYproperty is false by default, allowing vertical skewingWhen set to true, it prevents vertical skewing while preserving horizontal skewing
Users can still interact with the object normally for other transformations like scaling and rotation
To skew objects, hold the Shift key and drag along the desired direction
Conclusion
The lockSkewingY property provides precise control over object transformation in FabricJS. Use it when you need to maintain vertical integrity while allowing horizontal adjustments in your canvas applications.
232 Views
