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

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

PHPz

Libérer： 2023-09-02 14:09:02

avant

1151 Les gens l'ont consulté

FabricJS – 如何将 Line 对象移动到绘制对象堆栈的顶部？

Dans ce tutoriel, nous apprendrons comment déplacer un objet Line 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 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 vers le haut de la pile d'objets de dessin, nous utilisons la méthode bringToFront.

Grammaire

bringToFront(): fabric.Object

Copier après la connexion

Utilisez la méthode bringToFront

Exemple

Regardons un exemple de code pour voir le résultat lors de l'utilisation de la méthode bringToFront. La méthode bringToFront déplace l'objet vers le haut de la pile d'objets de dessin. Dans cet exemple, utilisez la méthode bringToFront pour déplacer line1 au-dessus de line2.

<!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 bringToFront method</h2>
   <p>You can see that line1 (blue) lies above line2 (red)</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 bringToFront method
      line1.bringToFront();
   </script>
</body>
</html>

Copier après la connexion

Utilisez la méthode bringToFront

sur trois objets

Exemple

Dans cet exemple, nous utilisons trois objets ligne, à savoir line1, line2 et line3. Bien qu'ils aient été ajoutés au canevas par ordre numérique, line1 est clairement en haut. En effet, nous utilisons la méthode bringToFront, qui envoie line1 en haut de la pile d'objets dessinés.

<!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 bringToFront method with three objects</h2>
   <p>
      You can see that line1 (blue) lies at the top of 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,
      });

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