FabricJS – Wie verschiebe ich ein Linienobjekt an eine bestimmte Indexposition im Zeichenobjektstapel?-js-Tutorial-php.cn

FabricJS – Wie verschiebe ich ein Linienobjekt an eine bestimmte Indexposition im Zeichenobjektstapel?

王林

Freigeben： 2023-08-23 14:06:20

nach vorne

1317 Leute haben es durchsucht

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Linienobjekt an eine bestimmte Indexposition im Zeichenobjektstapel verschieben. Das Line-Element ist eines der Grundelemente von FabricJS. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von fabric.Line erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um ein Linienobjekt an eine angegebene Indexposition im Zeichenobjektstapel zu verschieben, verwenden wir die Methode moveTo.

Grammatik

moveTo(index: Number): fabric.Object

Nach dem Login kopieren

Parameter

index – Dieser Parameter akzeptiert einen Number-Wert, der angibt, auf welche Ebene im Zeichenobjektstapel wir das Objekt verschieben möchten.

Verwenden Sie die moveTo-Methode

Beispiel

Sehen wir uns ein Codebeispiel an, um die Ausgabe bei Verwendung der Methode moveTo zu sehen. Die moveTo-Methode verschiebt das Objekt auf die angegebene Ebene im Zeichenobjektstapel. Verwenden Sie in diesem Fall die Methode moveTo, um line2 an den 0. Index zu senden.

<!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>

Nach dem Login kopieren

Verwenden Sie die Methode moveTo mit drei Objekten

Beispiel

In diesem Beispiel verwenden wir drei Linienobjekte, nämlich Linie1, Linie2 und Linie3. Obwohl sie in numerischer Reihenfolge zur Leinwand hinzugefügt werden, liegt Zeile3 an der ersten Indexposition deutlich hinter Zeile2. Dies liegt daran, dass wir die Methode moveTo verwendet haben, die line3 an die erste Indexposition verschiebt, während line1 und line2 jeweils die 0. und 2. Indexposition im Zeichenobjektstapel belegen.

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFabricJS – Wie verschiebe ich ein Linienobjekt an eine bestimmte Indexposition im Zeichenobjektstapel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!