Heim > Artikel > Web-Frontend > FabricJS – Wie verschiebt man ein Linienobjekt im Zeichenobjektstapel einen Schritt nach oben?
FabricJS – Wie verschiebt man ein Linienobjekt im Zeichenobjektstapel einen Schritt nach oben?
- 王林nach vorne
- 2023-08-24 14:37:08854Durchsuche
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
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.
Verwenden Sie die
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>
Verwenden Sie die
-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>
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!