FabricJS - Comment déplacer un objet Line d'un cran vers le haut dans la pile d'objets de dessin ?-js tutoriel-php.cn

FabricJS - Comment déplacer un objet Line d'un cran vers le haut dans la pile d'objets de dessin ?

王林

Libérer： 2023-08-24 14:37:08

avant

933 Les gens l'ont consulté

FabricJS – 如何将 Line 对象在绘制对象堆栈中向上移动一步？

Dans ce tutoriel, nous apprendrons comment déplacer un objet Line d'un cran vers le haut de la pile d'objets de dessin à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis. Nous pouvons créer un objet ligne en créant une instance de fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour déplacer l'objet Line d'un cran vers le haut de la pile d'objets de dessin, nous utilisons la méthode bringForward.

Grammaire

bringForward(intersecting: Boolean): fabric.Object

Copier après la connexion

Paramètres

Intersecting - Ce paramètre accepte une valeur Boolean qui, lorsqu'elle est affectée à une valeur "vraie", envoie l'objet à l'objet d'intersection supérieur suivant devant. Si la valeur est "false", il enverra normalement l'objet jusqu'à l'objet suivant sur la pile. Ce paramètre est facultatif.

Utilisez la méthode bringForward

Exemple

Regardons un exemple de code pour voir le résultat lors de l'utilisation de la méthode bringForward. La méthode bringForward déplace l'objet d'un cran vers le haut dans la pile d'objets dessinés. Dans cet exemple, la ligne 1 est envoyée au-dessus de la ligne 2 à l'aide de la méthode bringForward.

<!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>Using bringForward method</h2>
   <p>
      You can see that line1 (blue) has been moved up in the stack of drawn objects
   </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 Line object
      var line1 = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

      // Initiate another Line object
      var line2 = new fabric.Line([200, 70, 70, 40], {
         stroke: "red",
         strokeWidth: 20,
      });

      // Add both to the canvas
      canvas.add(line1);
      canvas.add(line2);

      // Using bringForward method
      line1.bringForward();
   </script>
</body>
</html>

Copier après la connexion

Utilisez la méthode bringForward

avec trois objets et clés d'intersection activés

Exemple

Dans cet exemple, nous utilisons trois objets ligne, à savoir line1, line2 et line3. Bien qu'elles aient été ajoutées au canevas par ordre numérique, la ligne 1 est clairement au-dessus de line3. En effet, nous utilisons la méthode bringForward avec les clés d'intersection activées, qui envoie la ligne1 au-dessus de son prochain objet d'intersection supérieur (c'est-à-dire line3).

<!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>Using bringForward method with three objects and intersection key enabled</h2>
   <p>
      You can see that the blue line now lies above the green line which is line number 3
   </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 Line object
      var line1 = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

      // Initiate another Line object
      var line2 = new fabric.Line([500, 70, 400, 40], {
         stroke: "red",
         strokeWidth: 20,
      });

      // Initiate another Line object
      var line3 = new fabric.Line([200, 30, 30, 90], {
         stroke: "green",
         strokeWidth: 20,
      });

      // Add them all to the canvas
      canvas.add(line1);
      canvas.add(line2);
      canvas.add(line3);

      // Using bringForward method
      line1.bringForward(true);
   </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!