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

FabricJSJavascriptHTML5 Canvas

In this tutorial, we are going to learn how to set the minimum allowed scale of Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas. We can customize a circle object by adding a fill colour to it, eliminate its borders or even make changes in its dimensions. Similarly, we can also set its minimum allowed scale by using the minScaleLimit property.

Syntax

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

Parameters

  • options (optional) − This parameter is an Object which provides additional customizations to our circle. Using this parameter colour, cursor, border width and a lot of other properties can be changed related to the object of which minScaleLimit is a property.

Options Keys

  • minScaleLimit − This property accepts a Number as a value that allows us to control the minimum allowed scale of a circle.

Example 1

Default appearance of the circle object

Let's see a code to see how our circle object looks like when the minScaleLimit property is not used. In this case, we will be able to scale an object freely since there is no minimum limit 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>Setting the minimum allowed scale value of circle using FabricJS</h2>
      <p>Select the object and scale it down by dragging one of its controlling corners. Here you can scale down the object freely since there is no minimum limit set.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#ff1493"
         });

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

Example 2

Passing the minScaleLimit property as key with a custom value

In this example, we will see how assigning a value to the minScaleLimit property changes the minimum allowed scale value of the circle object in our canvas. Here we have used 0.8 as value which means we will not be able to scale down our object lesser than a radius of 64px which is calculated by radius * limit (0.8 * 80 = 64px).

<!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 the minimum allowed scale value of circle using FabricJS</h2>
      <p>Select the object and try to scale it down by dragging one of its controlling corners. You cannot scale down the object freely, as we have set <b>minScaleLimit</b> at 0.8. So, the minimum scale of the circle must be at least 80% of the original radius, beyond which you cannot scale it down any further. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 80,
            fill: "#ff1493",
            minScaleLimit: 0.8
         });

         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
raja
Updated on 25-May-2022 14:14:56

Advertisements