Comment retourner un cercle verticalement en utilisant FabricJS ?-js tutoriel-php.cn

Comment retourner un cercle verticalement en utilisant FabricJS ?

WBOY

Libérer： 2023-08-24 12:29:02

avant

971 Les gens l'ont consulté

如何使用 FabricJS 垂直翻转圆？

Dans ce tutoriel, nous allons apprendre à retourner un objet Circle verticalement à 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. Nous pouvons retourner l'objet circulaire verticalement en utilisant la propriété flipY.

Syntaxe

new fabric.Circle({ flipY: Boolean }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> qui offre une personnalisation supplémentaire pour nos cercles. En utilisant ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées à l'objet dont flipY est la propriété.

Option Key

flipY - Cette propriété accepte une valeur booléenne. Cela nous permet de retourner des objets verticalement.

Exemple 1

Passer flipY comme clé avec la valeur 'false'

Regardons un exemple qui nous montre l'orientation par défaut des objets circulaires dans FabricJS. Puisque nous avons passé une fausse valeur à la propriété flipY, l'objet circulaire ne se retournera pas verticalement.

<!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 flip a Circle vertically using FabricJS?</h2>
      <p>This is the default orientation of the object. We have set <b>flipY</b> as False, but even if we don&#39;t use it, <b>flipY</b> will be by default set to False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 50,
            fill: "green",
            radius: 80,
            stroke: "#228b22",
            strokeWidth: 2,
            flipY: false
         });

         // Create gradient fill
         circle.set("fill", new fabric.Gradient({
            type: "linear",
            coords: {
               x1: 0,
               y1: 0,
               x2: 0,
               y2: 50
            },
            colorStops: [{
               offset: 0,
               color: "red"
            }, {
               offset: 1,
               color: "green"
            }, ],
         }));

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

Copier après la connexion

Exemple 2

Passer la propriété FlipY comme clé avec une valeur de "true"

Dans cet exemple, nous avons un objet circulaire d'un rayon de 80px avec un remplissage dégradé linéaire vertical. Lorsque nous appliquons la propriété flipY à l'objet cercle, il se retourne verticalement, nous voyons donc également les retournements de dégradé.

<!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 flip a Circle vertically using FabricJS?</h2>
      <p>Here observe that the circle has flipped vertically (see the gradient), as we have set <b>flipY</b> to True.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 50,
            fill: "green",
            radius: 80,
            stroke: "#228b22",
            strokeWidth: 2,
            flipY: true
         });

         // Create gradient fill
         circle.set("fill", new fabric.Gradient({
            type: "linear",
            coords: {
               x1: 0,
               y1: 0,
               x2: 0,
               y2: 50
            },
            colorStops: [{
               offset: 0,
               color: "red"
            }, {
               offset: 1,
               color: "green"
            }, ],
         }));

         // Adding them to the canvas
         canvas.add(circle);
         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!