FabricJS – Wie verschiebe ich ein Linienobjekt an den unteren Rand des Zeichenobjektstapels?-js-Tutorial-php.cn

FabricJS – Wie verschiebe ich ein Linienobjekt an den unteren Rand des Zeichenobjektstapels?

WBOY

Freigeben： 2023-08-24 08:05:12

nach vorne

648 Leute haben es durchsucht

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Linienobjekt an den unteren Rand des Zeichenobjektstapels verschieben. Das Linienelement ist eines der in FabricJS bereitgestellten Grundelemente. 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 das Linienobjekt an das Ende des Zeichenobjektstapels zu verschieben, verwenden wir die Methode sendToBack.

Grammatik

sendToBack(): fabric.Object

Nach dem Login kopieren

Verwenden Sie die sendToBack-Methode

Beispiel

Sehen wir uns ein Codebeispiel an, um die Ausgabe bei Verwendung der Methode sendToBack zu sehen. Die sendToBack-Methode verschiebt das Objekt an das Ende des Zeichenobjektstapels. In diesem Beispiel wird line2 nach line1 mit der Methode sendToBack gesendet.

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

Nach dem Login kopieren

Verwenden Sie die sendToBack-Methode

für drei Objekte

Beispiel

In diesem Beispiel verwenden wir drei Linienobjekte, nämlich Linie1, Linie2 und Linie3. Auch wenn sie der Leinwand in numerischer Reihenfolge hinzugefügt wurden, ist Zeile3 offensichtlich die letzte. Dies liegt daran, dass wir die Methode sendToBack verwenden, die line3 an das Ende des Zeichenobjektstapels sendet.

<!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 sendToBack method with three objects</h2>
   <p>
      You can see that line3 (green) lies at the bottom 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 sendToBack method
      line3.sendToBack();
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFabricJS – Wie verschiebe ich ein Linienobjekt an den unteren Rand des Zeichenobjektstapels?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!