FabricJS – Wie verschiebe ich ein Linienobjekt an die Spitze des Zeichenobjektstapels?-js-Tutorial-php.cn

FabricJS – Wie verschiebe ich ein Linienobjekt an die Spitze des Zeichenobjektstapels?

PHPz

Freigeben： 2023-09-02 14:09:02

nach vorne

1207 Leute haben es durchsucht

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Linienobjekt an die Spitze des Zeichenobjektstapels verschieben. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. 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 fabric.Line-Instanz erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um das Linienobjekt an die Spitze des Zeichenobjektstapels zu verschieben, verwenden wir die Methode bringToFront.

Grammatik

bringToFront(): fabric.Object

Nach dem Login kopieren

Verwenden Sie die bringToFrontMethode

Beispiel

Schauen wir uns ein Codebeispiel an, um die Ausgabe bei Verwendung der Methode bringToFront zu sehen. Die Methode bringToFront verschiebt das Objekt an die Spitze des Zeichnungsobjektstapels. In diesem Beispiel verwenden Sie die Methode bringToFront, um Zeile1 über Zeile2 zu verschieben.

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

Nach dem Login kopieren

Verwenden Sie die bringToFront-Methode

für drei Objekte

Beispiel

In diesem Beispiel verwenden wir drei Linienobjekte, nämlich Linie1, Linie2 und Linie3. Obwohl sie der Leinwand in numerischer Reihenfolge hinzugefügt wurden, steht Zeile1 eindeutig an der Spitze. Dies liegt daran, dass wir die Methode bringToFront verwenden, die line1 an die Spitze 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 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>

Nach dem Login kopieren

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