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 resize an object non-uniformly via corner points using FabricJS?
In this article, we are going to learn how to resize an object non-uniformly via corner points using FabricJS. In FabricJS, an object gets transformed proportionally when dragged from the corners. However, we can control this behavior by pressing the uniScaleKey.
Syntax
new fabric.Canvas(element: HTMLElement|String, { uniScaleKey: String }: Object)
Parameters
-
element ? This parameter is the <canvas> element itself which can be derived using Document.getElementById() or the id of the <canvas> element itself. The FabricJS canvas will be initialized on this element.
-
options (optional) ? This parameter is an Object which provides additional customizations to our canvas. Using this parameter, properties such as color, cursor, border width, and a lot of other properties can be changed related to the canvas, of which uniScaleKey is a property. It accepts a String value which indicates which key switches uniform scaling. Its default value is shiftKey. The possible key values are: altKey, shiftKey and ctrlKey.
Example 1: Pressing the shiftKey to Disable Uniform Scaling
When an object gets transformed by dragging the edges while maintaining the aspect ratio, we say that the object is uniformly scaled. The uniScaleKey allows us to control that behavior on the spot. By default, the objects in FabricJS are scaled proportionally. Let's see a code example of how an object gets scaled non-uniformly when shiftKey is pressed.
<!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>Resizing an object non-uniformly via corner points</h2>
<p>Hold the <b>shift</b> key and drag the object from its corners. The object will resize non-uniformly.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 70,
top: 90,
radius: 40,
fill: "#006400",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Changing the uniScaleKey to ctrlKey
Although its default value is shiftKey, we can also use the values: 'ctrlKey' and 'altKey' instead. If NULL or any other key is specified, then the feature will be disabled.
<!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>Resizing an object non-uniformly via corner points</h2>
<p>Hold the <b>ctrl</b> key and drag the object from its corners. The object will resize non-uniformly.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance with custom uniScaleKey
var canvas = new fabric.Canvas("canvas", {
uniScaleKey: "ctrlKey",
});
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 70,
top: 90,
radius: 40,
fill: "#006400",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
How It Works
The uniScaleKey property determines which key must be held while dragging corner handles to enable non-uniform scaling. Without holding this key, objects scale proportionally. When the specified key is pressed, you can stretch the object in one direction without maintaining aspect ratio.
Key Options Comparison
| Key Value | Physical Key | Common Use |
|---|---|---|
| shiftKey | Shift | Default - most common |
| ctrlKey | Ctrl (Cmd on Mac) | Alternative modifier |
| altKey | Alt (Option on Mac) | Less common alternative |
Conclusion
The uniScaleKey property in FabricJS allows you to control non-uniform scaling behavior by specifying which modifier key enables free-form resizing. This gives users precise control over object transformations in canvas applications.
988 Views
