search

Home  >  Article  >  Web Front-end  >  How to set the rotation angle of an ellipse using FabricJS?

How to set the rotation angle of an ellipse using FabricJS?

PHPz
PHPzforward
2023-09-10 13:29:021444browse

如何使用 FabricJS 设置椭圆的旋转角度？

In this tutorial, we will set the rotation angle of the 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. The angle property in FabricJS defines the 2D rotation angle of an object. We also have the centeredRotation property, which allows us to use the center point of the ellipse as the origin of the transformation.

Syntax

new fabric.Ellipse({ angle: Number, centeredRotation: Boolean }: Object)

Parameters

  • Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Use this parameter to change the color, cursor, stroke width and many other properties related to the canvas, of which angle and centeredRotation are properties.

Option Key

  • Angle - This property accepts numbers Specifies the rotation angle of the ellipse in degrees.

  • centeredRotation - This property accepts a Boolean value that determines whether the center of the ellipse is the origin of the transformation.

Example 1

Pass angle as the key with a custom value and disable center rotation of the ellipse

Let us take an example of setting the rotation angle of an ellipse in FabricJS. Negative angles specify a counterclockwise direction, while positive angles specify a clockwise direction. Since we assigned centeredRotation a "false" value, the ellipse will rotate while using its corners as the center 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 set the angle of rotation of an Ellipse using FabricJS?</h2>
      <p>Select the object and rotate it. Here we have set the angle of rotation at <b>-40</b></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: 180,
            top: 180,
            rx: 90,
            ry: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -40,
            centeredRotation: false
         })

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

Example 2

Enable ellipse centered rotation

From this example we can see that by setting the centeredRotation property As "true", our ellipse now uses its center as the center of rotation. Prior to version 1.3.4, centeredScaling and centeredRotation were contained in a property called centerTransform. 

<!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 angle of rotation of an Ellipse using FabricJS?</h2>
      <p>Select the object and rotate it. You will notice that the object rotates around its center as we have set the <b>centeredRotation</b> property to True. </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: 180,
            top: 180,
            rx: 90,
            ry: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -40,
            centeredRotation: true
         });

         // 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 rotation angle 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：Increment given date in JavaScriptNext article：Increment given date in JavaScript

Related articles

See more