How to set a custom key to enable/disable uniform scaling on a canvas in FabricJS?

FabricJSJavascriptHTML5 Canvas

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. It's default value is shiftKey.

Example 1

Passing the uniScaleKey property with the value as 'altKey'

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.Rect 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

Passing the uniScaleKey property with the value as 'ctrlKey'

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.Rect 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>
raja
Updated on 20-May-2022 06:34:17

Advertisements