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

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

WBOY

Libérer： 2023-09-10 14:01:11

avant

1341 Les gens l'ont consulté

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

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

Syntaxe

 sendBackwards(intersecting: Boolean): fabric.Object

Copier après la connexion

Paramètres

Intersect - Ce paramètre accepte une valeur booléenneLorsqu'il est spécifié comme une valeur "vraie", enverra l'objet derrière l'objet d'intersection inférieur suivant. Si la valeur est "false", il envoie normalement l'objet après l'objet suivant sur la pile. Ce paramètre est facultatif.

Utilisation de la méthode sendBackwards

Exemple

Regardons un exemple de code pour voir le résultat lors de l'utilisation de la méthode sendBackwards. La méthode sendBackwards déplace l'objet d'un cran vers le bas dans la pile d'objets dessinés. Dans cet exemple, la ligne2 est envoyée après la ligne1 à l'aide de la méthode sendBackwards.

<!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 sendBackwards method</h2>
   <p>
      You can see that line2 (red) has been moved down 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 sendBackwards method
      line2.sendBackwards();
   </script>
</body>
</html>

Copier après la connexion

Utilisez la méthode sendBackwards et activez trois objets et activez la clé d'intersection

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, line3 est clairement derrière line1. En effet, nous utilisons la méthode sendBackwards avec les touches d'intersection activées, qui envoie line3 derrière son objet d'intersection inférieur suivant (c'est-à-dire line1). p>

<!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 sendBackwards method with three objects and intersection key enabled</h2>
   <p>
      You can see that the green line now lies behind the blue line which is line number 1
   </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 sendBackwards method
      line3.sendBackwards(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!