Heim > Artikel > Web-Frontend > FabricJS – Wie verschiebe ich ein Linienobjekt an den unteren Rand des Zeichenobjektstapels?
FabricJS – Wie verschiebe ich ein Linienobjekt an den unteren Rand des Zeichenobjektstapels?
- WBOYnach vorne
- 2023-08-24 08:05:12618Durchsuche
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
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>
Verwenden Sie die sendToBack-Methode
für drei ObjekteBeispiel
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>
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!