Home > Article > Web Front-end > How to set the minimum allowed proportion value of an ellipse using FabricJS?

How to set the minimum allowed proportion value of an ellipse using FabricJS?

PHPzforward: 2023-09-08 16:25:02522browse

如何使用 FabricJS 设置椭圆的最小允许比例值？

In this tutorial, we will learn how to set the minimum allowed proportion of an ellipse using FabricJS. The oval is one of the various shapes provided by FabricJS. To create an ellipse, we will create an instance of the Fabric.Ellipse class and add it to the canvas. We can customize the ellipse 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.Ellipse({ minScaleLimit : Number }: Object)

Parameters

Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Use this parameter to change the color, cursor, border width, and many other properties associated with the object for which minScaleLimit is a property.

Option Key

##minScaleLimit - This property accepts numbers strong> as a value that allows us to control the minimum scale allowed for the ellipse.

Example 1

The appearance of the default ellipse object

Let's take an example to see without using

The minScaleLimit property is what the ellipse 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>How to set the minimum allowed scale value of Ellipse using FabricJS?</h2>
      <p>Here you can select the object and scale it up freely to any extent, as we have not used the <b>minScaleLimit</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </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 of an ellipse object in the canvas. Here we use 0.8 as the value, which means we will not be able to shrink the object smaller than the horizontal radius of 64 pixels and the vertical radius of 40 pixels, calculated as

radius*limit (0.8 * 80 = 64 pixels, 0.8 * 50 = 40 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>How to set the minimum allowed scale value of Ellipse using FabricJS?</h2>
      <p>Select the object and try to scale it down. Here we have set the <b>minScaleLimit</b> to 0.8 beyond which the ellipse cannot be reduced further in size. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            minScaleLimit: 0.8,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

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

对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Which Android browser has the best JavaScript support?Next article：Which Android browser has the best JavaScript support?

See more

How to set the minimum allowed proportion value of an ellipse using FabricJS?

Syntax

Parameters

Option Key

Related articles