search

Home >Web Front-end >JS Tutorial >How to set custom key to enable/disable unified scaling on FabricJS canvas?

How to set custom key to enable/disable unified scaling on FabricJS canvas?

PHPz
PHPzforward
2023-09-07 11:57:081007browse

如何设置自定义键以启用/禁用 FabricJS 画布上的统一缩放？

In this article, we will learn how to set custom keys to enable/disable unified scaling in FabricJS. In FabricJS, when an object is dragged from a corner, the object transforms proportionally. This is called uniform scaling. However, we can enable/disable this behavior using uniScaleKey.

Syntax

new fabric.Canvas(element: HTMLElement|String, { uniScaleKey: String }: Object)

Parameters

element - This parameter is the element itself, Document derivation can be used. getElementById() or the id of the element itself. The FabricJS canvas will be initialized on this element.

Options (optional) - This parameter is an object that provides additional customization to our canvas. Using this parameter, you can change many attributes related to the canvas, such as color, cursor, and border width, among which uniScaleKey is one attribute. It accepts a string value that determines which key toggles unified scaling. Its default value is shiftKey.

Example 1

Passing the uniScaleKey attribute with value "altKey"

Let's take a look at the customization for disabling unified scaling in FabricJS Code example for key. Here we set the uniScaleKey to "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

Pass the uniScaleKey attribute with the value "ctrlKey"

We can also pass "ctrlKey"' As the value of the uniScaleKey property, since it is also a modifier key. If a NULL value or a key that is not a modifier key is specified for uniScaleKey, its functionality will be disabled.

In this example, uniformScaling has been assigned a false value, which means the feature has been disabled. Once we press 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>

The above is the detailed content of How to set custom key to enable/disable unified scaling on FabricJS canvas?. For more information, please follow other related articles on the PHP Chinese website!

NULL 字符串 对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Find the hypotenuse of a number in TypeScriptNext article：Find the hypotenuse of a number in TypeScript

Related articles

See more