Comment définir l'angle de rotation d'un cercle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir l'angle de rotation d'un cercle à l'aide de FabricJS ?

王林

Libérer： 2023-09-14 08:57:23

avant

1548 Les gens l'ont consulté

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

Dans ce tutoriel, nous définirons l'angle de rotation d'un cercle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Afin de créer un cercle, nous devons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. La propriété angle dans FabricJS définit l'angle de rotation 2D d'un objet. Nous avons également la propriété centeredRotation, qui nous permet d'utiliser le point central du cercle comme origine de la transformation.

Syntaxe

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

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> offrant une personnalisation supplémentaire à notre objet. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et d'autres propriétés liées au cercle, où angle et centeredRotation sont des propriétés. p>

Clé d'option

Angle - Cette propriété accepte un numéro qui spécifie l'angle de rotation du cercle en degrés.
centeredRotation - Cette propriété accepte une valeur boolean qui détermine si le centre du cercle est l'origine de la transformation.

Exemple 1

Passez l'angle comme clé avec une valeur personnalisée et désactivez la rotation centrée du cercle

L'exemple suivant montre comment définir l'angle de rotation d'un cercle dans FabricJS. Les angles négatifs spécifient une direction dans le sens inverse des aiguilles d'une montre, tandis que les angles positifs spécifient une direction dans le sens des aiguilles d'une montre. Puisque nous avons spécifié une valeur False pour centeredRotation, le cercle tournera en utilisant ses coins comme centre de 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>

Copier après la connexion

Exemple 2

Activer la rotation centrée d'un cercle

À partir de cet exemple, nous pouvons voir qu'en définissant la propriété centeredRotation sur True, notre cercle utilise désormais son centre comme centre de rotation. Avant la version 1.3.4, centeredScaling et centeredRotation étaient contenus dans une propriété appelée 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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!