search

Home  >  Article  >  Web Front-end  >  How to set the minimum allowed scale value of a rectangle using FabricJS?

How to set the minimum allowed scale value of a rectangle using FabricJS?

王林
王林forward
2023-08-27 12:21:03989browse

How to set the minimum allowed scale value of a rectangle using FabricJS?

In this tutorial we will learn how to set the minimum allowed proportions of a rectangle Use FabricJS. Rectangle is one of the various shapes provided by FabricJS. for To create a rectangle we have to create an instance of the Fabric.Rect class and add it to the canvas.

We can customize the rectangular object by adding a fill color, removing its borders, and even changing its dimensions. Likewise, we can also use the minScaleLimit property to set its minimum allowed scale.

Syntax

new fabric.Rect({ minScaleLimit : Number }: Object)

Parameters

  • Options (optional) - This parameter is an object which is our rectangle Provides additional customization. Using this parameter, you can change properties such as color, cursor, border width, and many other properties related to the object for which minScaleLimit is an attribute.

Option Key

  • minScaleLimit - This property allows us to control the minimum allowed scale value of the rectangle. It accepts digits as value.

Example 1

Default appearance of rectangular objects strong>

Let's look at a code example to see how it works without using minScaleLimit property is what the rectangular object looks like. In this case we will be able to scale the object freely since no minimum limit is set. 

<!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>Default appearance of the rectangle object</h2>
   <p>You can try scaling the rectangle to see that there is no minimum allowed scale value.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 155,
         top: 90,
         width: 170,
         height: 70,
         fill: "#6f2da8",
         padding: 9,
         stroke: "#b666d2",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Example 2

Passing the minScaleLimit attribute as a key with a custom value

In this example, We'll see how assigning a value to the minScaleLimit property changes the minimum allowed scale value for a rectangular object in the canvas. Here we are using 0.8 as the value, which means we will not be able to shrink the object to less than 136 pixels width and 56 pixels height, which is calculated by radius*limit (0.8 * 170 = 136 pixels) , 0.8 * 70 = 56 pixels). 

<!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>Passing the minScaleLimit property as key with a custom value</h2>
   <p>You can try scaling the rectangle and observer that it isn&#39;t possible to scale down the rectangle lesser than a width of 136px and height of 56px.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 155,
         top: 90,
         width: 170,
         height: 70,
         fill: "#6f2da8",
         padding: 9,
         stroke: "#b666d2",
         strokeWidth: 5,
         minScaleLimit: 0.8,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

The above is the detailed content of How to set the minimum allowed scale value of a rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to clear cache using JavaScript?Next article：How to clear cache using JavaScript?

Related articles

See more