search

Home >Web Front-end >JS Tutorial >How to disable center rotation of ellipse using FabricJS?

How to disable center rotation of ellipse using FabricJS?

WBOY
WBOYforward
2023-08-28 09:13:111135browse

如何使用 FabricJS 禁用椭圆的居中旋转？

In this tutorial, we will learn how to disable the centered rotation of an ellipse 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. By default, all objects in FabricJS use their center as the rotation point. However, we can change this behavior using the centeredRotation property.

Syntax

new fabric.Ellipse({ centeredRotation: 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 centeredRotation property.

Option Key

  • ##centeredRotation - This property accepts a Boolean Values ​​ em> The value allows us to control whether the object uses its center point as the transformation origin when rotated through the control. Its default value is True.

Example 1

Default behavior of ellipse rotation in FabricJS strong>

Let’s see an example describing the default behavior of ellipse objects . Since the

centeredRotation property is set to "true" by default, the ellipse object uses its center as the point of rotation. 

<!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 rotation of Ellipse using FabricJS?</h2>
      <p>Select the object and rotate it. The ellipse will by default rotate around 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",
         });

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

Example 2

Passing the centeredRotation key with a value of "false"

Now that we have seen the default behavior, let's take a look at the code Learn what happens when the

centeredRotation property is assigned the value "false". Here the ellipse no longer uses the center of the ellipse as the origin of rotation, but uses one of its sides. 

<!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 rotation of Ellipse using FabricJS?</h2>
      <p>Select the object and try to rotate it. The ellipse will not rotate around its center because we have set <b>centeredRotation</b> to 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: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredRotation: 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 center rotation of 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：How to use variables as keys in JavaScript object literals?Next article：How to use variables as keys in JavaScript object literals?

Related articles

See more