How to set the rotation angle of a circle using FabricJS?-JS Tutorial-php.cn

How to set the rotation angle of a circle using FabricJS?

王林

Release： 2023-09-14 08:57:23

forward

1585 people have browsed it

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

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

Syntax

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

Copy after login

Parameters

Options (optional) - This parameter is a Objects< /em> Provides additional customization for our objects. Using this parameter, you can change the color, cursor, stroke width and other properties related to the circle, where angle and centeredRotation are properties. p>

Option Key

Angle - This property accepts a Number, which specifies the angle of rotation of the circle in degrees.
centeredRotation - This property accepts a Boolean value that determines the center of the circle Whether it is the origin of the transformation.

Example 1

Pass angle as key with custom value and disable centered rotation of circle

Example below Demonstrates how to set the rotation angle of a circle in FabricJS. Negative angles specify a counterclockwise direction, while positive angles specify a clockwise direction. Since we have specified a False value for centeredRotation, the circle 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>Set the angle of rotation of a Circle using FabricJS</h2>
      <p>Select the object and observe its controlling corners. You will notice that the angle of rotation is set at 60 degrees in the anti-clockwise direction, as we have set the <b>angle</b> at <b>-60</b>. </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,
            radius: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -60,
            centeredRotation: false,
         });

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

Copy after login

Example 2

Enable centered rotation of the circle

From this example we can see that by setting centeredRotation With the property True, our circle 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>Set the angle of rotation of a Circle using FabricJS</h2>
      <p>Select the object and observe its controlling corners. Here we have set the angle of rotation at 60 degrees in the anti-clockwise direction, and when you rotate the circle, it will rotate around its center, as we have set <b>centeredRotation</b> 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,
            radius: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -60,
            centeredRotation: true,
         });

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

Copy after login

The above is the detailed content of How to set the rotation angle of a circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!