How to disable unified scaling in canvas using FabricJS?-JS Tutorial-php.cn

How to disable unified scaling in canvas using FabricJS?

WBOY

Release： 2023-09-03 20:57:08

forward

1003 people have browsed it

如何使用 FabricJS 禁用画布中的统一缩放？

In this article, we will learn how to disable unified scaling in canvas using FabricJS. In FabricJS, when an object is dragged from a corner, the object transforms proportionally. However, we can disable this behavior using the uniformScaling attribute.

Syntax

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

Copy after login

Parameters

##Element - This parameter is the element itself, Can be derived using
Options (optional) - This parameter is an object that provides additional customization of our canvas. Using this parameter, you can change canvas-related properties such as color, cursor, border width, and many other properties, of which uniformScaling is a property. It accepts a Boolean value that determines whether the object should be scaled proportionally. Its default value is True.

Example: Passing uniformScaling as key with value False

Let's look at a code example to see how an object behaves when

uniformScaling is set to False , the scaling is uneven. Starting with FabricJS version 4, the property uniScaleTransform has been removed and replaced by uniformScaling.

<!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>
   <div style="padding: 10px; font-weight: bold; margin-left: 32px">
      How to disable uniform scaling in canvas using FabricJS?
   </div>
   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
      // UniformScaling is disabled
         uniformScaling: false
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });

      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

Copy after login

Output

How to disable unified scaling in canvas using FabricJS?

#Example: Pass uniformScaling key to class with value True

Now we have understood how to scale non-uniformly When uniformScaling is False, we can enable uniformScaling to avoid this situation. Let’s see what the code looks like -

<!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>
   <div style="padding: 10px; font-weight: bold; margin-left: 32px">
      How to disable uniform scaling in canvas using FabricJS?
   </div>
   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         // UniformScaling is enabled
      uniformScaling: true
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });

      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

Copy after login

output

How to disable unified scaling in canvas using FabricJS?

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