How to disable centered scaling of a Circle using FabricJS?-JS Tutorial-php.cn

How to disable centered scaling of a Circle using FabricJS?

WBOY

Release： 2023-09-07 17:13:02

forward

1435 people have browsed it

如何使用 FabricJS 禁用 Circle 的居中缩放？

In this tutorial, we will learn how to disable centered scaling of a Circle using FabricJS. Circles are one of the various shapes provided by FabricJS. In order to create a circle, we must create an instance of the Fabric.Circle class and add it to the canvas. When scaling through a control, assign a true value to the centeredScaling property, using the center as the object's transformation origin.

Syntax

new fabric.Circle({ centeredScaling: Boolean }: Object)

Copy after login

Parameters

Options (optional) - This parameter is a provided Additional custom objects to our circles. Using this parameter, you can change the color, cursor, stroke width and other properties of the object related to the centeredScaling property

Option key

centeredScaling - This property accepts a boolean value. When this property is True, the object uses the center as the transformation origin.

Example 1

Pass centeredScaling as the key and assign it a "true" value

Let's look at a snippet of code to see how a circular object behaves when the centeredScaling

em> property is enabled. When we zoom in on an object, the origin of the transformation is the center of the circle.

<!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>Disabling the centered scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is set to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: true
         });

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

Copy after login

Example 2

Disabling the centeredScaling property

We can disable the centeredScaling property by specifying a false value for it. It will force the circle to no longer use the center of the circle as the center of the transformation. Here is a code to demonstrate this

<!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>Disabling the centered scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: false
         });

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

Copy after login

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