FabricJS – Wie verschiebt man ein Linienobjekt im Zeichenobjektstapel einen Schritt nach oben?-js-Tutorial-php.cn

FabricJS – Wie verschiebt man ein Linienobjekt im Zeichenobjektstapel einen Schritt nach oben?

王林

Freigeben： 2023-08-24 14:37:08

nach vorne

935 Leute haben es durchsucht

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Linienobjekt im Zeichenobjektstapel einen Schritt nach oben 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 im Zeichenobjektstapel einen Schritt nach oben zu verschieben, verwenden wir die Methode „bringForward“. Grammatik

bringForward(intersecting: Boolean): fabric.Object

Nach dem Login kopieren

Parameter

Intersecting – Dieser Parameter akzeptiert einen Booleschen-Wert, der, wenn ihm ein „wahrer“ Wert zugewiesen wird, das Objekt an das nächsthöhere sich überschneidende Objekt davor sendet. Wenn der Wert „false“ ist, wird das Objekt normalerweise an das nächste Objekt auf dem Stapel gesendet. Dieser Parameter ist optional.

bringForward

Methode Beispiel

Sehen wir uns ein Codebeispiel an, um die Ausgabe bei Verwendung der Methode

bringForward

zu sehen. Die bringForward-Methode verschiebt das Objekt im Zeichenobjektstapel um einen Schritt nach oben. In diesem Beispiel wird Zeile1 mit der Methode bringForward über Zeile2 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 bringForward method</h2>
   <p>
      You can see that line1 (blue) has been moved up 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 bringForward method
      line1.bringForward();
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die

bringForward

-Methode mit drei Objekten und aktivierten Schnittpunktschlüsseln Beispiel

In diesem Beispiel verwenden wir drei Linienobjekte, nämlich

Linie1, Linie2 und Linie3

. Obwohl sie der Leinwand in numerischer Reihenfolge hinzugefügt wurden, liegt Zeile1 deutlich über Zeile3. Dies liegt daran, dass wir die Methode bringForward mit aktivierten Schnittpunktschlüsseln verwenden, die Linie1 über das nächsthöhere Schnittobjekt (d. h. Linie3) 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 bringForward method with three objects and intersection key enabled</h2>
   <p>
      You can see that the blue line now lies above the green line which is line number 3
   </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 bringForward method
      line1.bringForward(true);
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFabricJS – Wie verschiebt man ein Linienobjekt im Zeichenobjektstapel einen Schritt nach oben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!