Maison > interface Web > js tutoriel > Comment retourner un rectangle horizontalement à l'aide de FabricJS ?

Comment retourner un rectangle horizontalement à l'aide de FabricJS ?

PHPz
Libérer: 2023-08-24 18:05:08
avant
648 Les gens l'ont consulté

如何使用 FabricJS 水平翻转矩形?

Dans ce tutoriel, nous allons apprendre à retourner un objet Rectangle horizontalement à l'aide de FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. Afin de créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter au canevas. Nous pouvons retourner l'objet rectangulaire horizontalement en utilisant la propriété flipX.

Syntaxe

1

new fabric.Rect({ flipX: Boolean }: Object)

Copier après la connexion

Paramètres

  • Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et d'autres propriétés liées à l'objet avec FlipX comme attribut.

Option Key

  • flipX - Cette propriété accepte une valeur Boolean qui nous permet de retourner l'objet horizontalement. < /p>

Exemple 1

Passer flipX comme clé avec une valeur "fausse"

Regardons un exemple de code qui nous montre l'orientation par défaut d'un objet rectangle dans FabricJS. Puisque nous avons passé une valeur False à la propriété flipX, l'objet rectangulaire ne se retournera pas horizontalement.

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

37

38

39

40

41

42

43

44

45

<!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>Passing flipX as key with a False value</h2>

   <p>You can see that the object is not flipped horizontally</p>

   <canvas id="canvas"></canvas>

   <script>

      // Initiate a canvas instance

      var canvas = new fabric.Canvas("canvas");

      canvas.setWidth(document.body.scrollWidth);

      canvas.setHeight(250);

 

      // Initiate a rectangle object

      var rect = new fabric.Rect({

         left: 125,

         top: 90,

         width: 170,

         height: 70,

         borderColor: "purple",

         borderScaleFactor: 3,

         flipX: false,

      });

 

      // Create gradient fill

         rect.set(

            "fill",

            new fabric.Gradient({

               type: "linear",

               coords: { x1: 0, y1: 0, x2: 50, y2: 0 },

               colorStops: [

                  { offset: 0, color: "pink" },

                  { offset: 1, color: "blue" },

               ],

            })

         );

 

      // Add it to the canvas

      canvas.add(rect);

   </script>

</body>

</html>

Copier après la connexion

Exemple 2

Passer l'attribut flipX comme clé avec une valeur de "true"

Dans cet exemple, nous avons un objet rectangulaire d'une largeur de 170 et d'une hauteur de 70 avec une ligne horizontale remplissage dégradé. Lorsque nous appliquons la propriété FlipX à l'objet rectangulaire, il se retourne horizontalement, nous voyons donc également le dégradé inversé.

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

37

38

39

40

41

42

43

44

45

<!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>Passing the flipX property as key with a True value</h2>

   <p>You can see now that the object has flipped horizontally</p>

   <canvas id="canvas"></canvas>

   <script>

      // Initiate a canvas instance

      var canvas = new fabric.Canvas("canvas");

      canvas.setWidth(document.body.scrollWidth);

      canvas.setHeight(250);

 

      // Initiate a rectangle object

      var rect = new fabric.Rect({

         left: 125,

         top: 90,

         width: 170,

         height: 70,

         borderColor: "purple",

         borderScaleFactor: 3,

         flipX: true,

      });

 

      // Create gradient fill

      rect.set(

         "fill",

         new fabric.Gradient({

            type: "linear",

            coords: { x1: 0, y1: 0, x2: 50, y2: 0 },

            colorStops: [

               { offset: 0, color: "pink" },

               { offset: 1, color: "blue" },

            ],

         })

      );

 

      // Add it to the canvas

      canvas.add(rect);

   </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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal