FabricJS - Comment déplacer un objet ligne vers une position d'index spécifique dans la pile d'objets dessinés ?-js tutoriel-php.cn

FabricJS - Comment déplacer un objet ligne vers une position d'index spécifique dans la pile d'objets dessinés ?

王林

Libérer： 2023-08-23 14:06:20

avant

1361 Les gens l'ont consulté

FabricJS - 如何将线对象移动到绘制对象堆栈中的特定索引位置？

Dans ce tutoriel, nous apprendrons comment déplacer un objet Line vers une position d'index spécifiée dans la pile d'objets de dessin à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis par 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. Afin de déplacer un objet Line vers une position d'index spécifiée dans la pile d'objets de dessin, nous utilisons la méthode moveTo.

Grammaire

moveTo(index: Number): fabric.Object

Copier après la connexion

Paramètres

index - Ce paramètre accepte une valeur Number qui spécifie à quel niveau de la pile d'objets dessinés nous souhaitons déplacer l'objet.

Utilisez la méthode moveTo

Exemple

Regardons un exemple de code pour voir le résultat lors de l'utilisation de la méthode moveTo. La méthode moveTo déplace l'objet au niveau spécifié dans la pile d'objets dessinés. Dans ce cas, utilisez la méthode moveTo pour envoyer line2 au 0ème index.

<!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 moveTo method</h2>
   <p>
      You can see that line2 (red) has been moved to the 0th index 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 moveTo method
      line2.moveTo(0);
   </script>
</body>
</html>

Copier après la connexion

Utilisez la méthode moveTo avec trois objets

Exemple

Dans cet exemple, nous utilisons trois objets ligne, à savoir line1, line2 et line3. Même s'ils sont ajoutés au canevas par ordre numérique, line3 est clairement derrière line2 à la première position de l'index. En effet, nous avons utilisé la méthode moveTo, qui déplace line3 vers la première position d'index, tandis que line1 et line2 occupent respectivement les 0ème et 2ème positions d'index dans la pile d'objets de dessin.

<!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 moveTo method with three objects</h2>
   <p>
      You can see that line3 (green) lies in the 1st index which is middle position in stack
   </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 moveTo method
      line3.moveTo(1);
   </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!