Heim > Artikel > Web-Frontend > FabricJS – Wie verschiebe ich ein Linienobjekt an eine bestimmte Indexposition im Zeichenobjektstapel?
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.
moveTo(index: Number): fabric.Object
index – Dieser Parameter akzeptiert einen Number-Wert, der angibt, auf welche Ebene im Zeichenobjektstapel wir das Objekt verschieben möchten.
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>
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>
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!