Maison > Article > interface Web > Comment définir l'angle de rotation d'une ellipse à l'aide de FabricJS ?

Comment définir l'angle de rotation d'une ellipse à l'aide de FabricJS ?

PHPzavant: 2023-09-10 13:29:021420parcourir

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

Dans ce tutoriel, nous définirons l'angle de rotation de l'ellipse à l'aide de FabricJS. L'ovale est l'une des différentes formes fournies par FabricJS. Afin de créer une ellipse, nous devons créer une instance de la classe Fabric.Ellipse 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 de l'ellipse comme origine de la transformation.

Syntaxe

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

Paramètres

Options (facultatif) - Ce paramètre est un objet offrant une personnalisation supplémentaire à notre ellipse. Utilisez ce paramètre pour modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées au canevas, dont l'angle et centeredRotation sont des propriétés.

Clé d'option

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

Exemple 1

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

Prenons un exemple de définition de l'angle de rotation d'une ellipse 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 attribué une "fausse" valeur à centeredRotation, l'ellipse pivotera en utilisant ses points d'angle 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>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>

Exemple 2

Activer la rotation centrée de l'ellipse

À partir de cet exemple, nous pouvons voir qu'en définissant la propriété centeredRotation sur "true", notre ellipse 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>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>

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!

对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Incrémenter la date donnée en JavaScriptArticle suivant：Incrémenter la date donnée en JavaScript

Articles Liés

Voir plus