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.
sendBackwards(intersecting: Boolean): fabric.Object
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.
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>
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>
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!
