search

Home  >  Article  >  Web Front-end  >  How to disable Ellipse's centered scaling using FabricJS?

How to disable Ellipse's centered scaling using FabricJS?

王林
王林forward
2023-09-17 09:25:021109browse

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

In this tutorial, we will learn how to disable Ellipse’s Centered Zoom using FabricJS. The oval is one of the various shapes provided by FabricJS. In order to create an ellipse, we must create an instance of the Fabric.Ellipse class and add it to the canvas. When scaling through a control, assign the centeredScaling property a value of "true" to use the center as the object's transformation origin.

Syntax

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

Parameters

  • Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties of the object related to the centeredScaling property.

Option Key

  • ##centeredScaling - This property accepts a Boolean value em> 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

The following example demonstrates how an ellipse object behaves when the

centeredScaling property is enabled. When we zoom in on an object, the origin of the transformation is the center of the ellipse. 

<!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 disable the centered scaling of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it from its corners. The ellipse will scale up from its center. This is the default behavior.</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: 215,
            top: 100,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: true,
         });

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

Example 2

Disable the centeredScaling property

We can disable the

centeredScaling property by specifying a "false" value for it . This will no longer use the center of the ellipse as the center of the transformation. Here is a code to demonstrate -

<!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 disable the centered scaling of Ellipse using FabricJS?</h2>
      <p>Select the object and stretch it from its corners. You will notice the object scales up but not from its center because we have set <b>centeredScaling</b> as False. </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: 215,
            top: 100,
            fill: "",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredScaling: false,
         });

         // 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 disable Ellipse's centered scaling 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：How to maintain the stroke width of a triangle when scaling using FabricJS?Next article：How to maintain the stroke width of a triangle when scaling using FabricJS?

Related articles

See more