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

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

PHPz

Libérer： 2023-09-10 13:29:02

avant

1589 Les gens l'ont consulté

如何使用 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

1	`new` `fabric.Ellipse({ 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 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.

< h2>Clé d'option
Angle - Cette propriété accepte un numéro< /em> 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 < em>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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
   <head>
      
      <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>
Copier après la connexion
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
   <head>
      
      <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>
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!