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

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

WBOY

Freigeben： 2023-09-10 14:01:11

nach vorne

1260 Leute haben es durchsucht

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

In diesem Tutorial lernen wir, wie man mit FabricJS ein Linienobjekt einen Schritt nach unten im Zeichenobjektstapel verschiebt. 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 ein Linienobjekt im Zeichenobjektstapel einen Schritt nach unten zu verschieben, verwenden wir die Methode sendBackwards.

Syntax

 sendBackwards(intersecting: Boolean): fabric.Object

Nach dem Login kopieren

Parameter

Intersect – Dieser Parameter akzeptiert einen Booleschen WertWenn er als „wahrer“ Wert angegeben wird, wird das Objekt hinter das nächstniedrigere sich schneidende Objekt gesendet. Wenn der Wert „false“ ist, wird das Objekt normalerweise nach dem nächsten Objekt auf dem Stapel gesendet. Dieser Parameter ist optional.

Verwendung der Methode sendBackwards

Beispiel

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

sendBackwards zu sehen. Die sendBackwards-Methode verschiebt das Objekt im Zeichenobjektstapel um einen Schritt nach unten. In diesem Beispiel wird Zeile2 nach Zeile1 mit der Methode sendBackwards 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 sendBackwards method</h2>
   <p>
      You can see that line2 (red) has been moved down 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 sendBackwards method
      line2.sendBackwards();
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die Methode

sendBackwards, aktivieren Sie drei Objekte und aktivieren Sie den Schnittpunktschlüssel

Beispiel

In diesem Beispiel verwenden wir drei Linienobjekte, nämlich

Linie1, Linie2 und Linie3. Obwohl sie in numerischer Reihenfolge zur Leinwand hinzugefügt wurden, liegt Zeile3 deutlich hinter Zeile1. Dies liegt daran, dass wir die sendBackwards-Methode mit aktivierten Kreuzungsschlüsseln verwenden, die line3 hinter das nächstniedrigere Kreuzungsobjekt (d. h. line1) sendet. p>

<!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 sendBackwards method with three objects and intersection key enabled</h2>
   <p>
      You can see that the green line now lies behind the blue line which is line number 1
   </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 sendBackwards method
      line3.sendBackwards(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 unten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!