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 set a custom key to enable/disable uniform scaling on a canvas in FabricJS?
In this article, we are going to learn how to set a custom key to enable/disable uniform scaling in FabricJS. In FabricJS, an object gets transformed proportionally when dragged from its corners. This is called uniform scaling. However, we can enable/disable this behavior by using 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 determines which key switches uniform scaling. Its default value is shiftKey.
Example 1: Using 'altKey' to Control Uniform Scaling
Let's see a code example of the custom key to disable uniform scaling in FabricJS. Here, we have set the uniScaleKey as 'altKey'.
<!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>Setting a custom key to enable/disable uniform scaling on a canvas</h2>
<p>Hold the <b>alt</b> key and stretch the object diagonally. The object will scale non-uniformly.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
uniformScaling: true,
uniScaleKey: "altKey"
});
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "orange",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Using 'ctrlKey' to Enable Uniform Scaling
We can also pass the 'ctrlKey' as a value for the uniScaleKey property since it is also a modifier key. If uniScaleKey is assigned a NULL value or a key that is not a modifier key, then its features are disabled.
In this example, uniformScaling has been assigned a false value which means that feature is disabled. As soon as we press the ctrlKey, uniform scaling will be enabled again.
<!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>Setting a custom key to enable/disable uniform scaling on a canvas</h2>
<p>Hold the <b>ctrl</b> key and stretch the object diagonally. It will scale uniformly.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
uniformScaling: false,
uniScaleKey: "ctrlKey"
});
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "red",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
The uniScaleKey property works with modifier keys such as:
- shiftKey (default) - Standard shift key behavior
- altKey - Uses the Alt key to toggle scaling mode
- ctrlKey - Uses the Ctrl key to toggle scaling mode
When uniformScaling is true, holding the specified key disables uniform scaling. When uniformScaling is false, holding the key enables uniform scaling.
Conclusion
The uniScaleKey property in FabricJS allows you to customize which modifier key controls uniform scaling behavior. This provides flexibility in creating intuitive user interfaces for canvas-based applications.
618 Views
