Gibt es eine Möglichkeit, Objekte auf einem Fabric.js-Canvas über die offizielle API zu schichten? Im Moment ist die einzige Möglichkeit, die ich gefunden habe, die canvas._objects manuell zu durchlaufen und sie neu anzuordnen, so dass sie in einer bestimmten Reihenfolge gezeichnet werden. Gibt es einen besseren Weg dies zu tun, der das Objekt (möglicherweise) nicht bricht?Layering-Objekte in Fabric.js
Antwort
[Bearbeiten] Ich habe meine Info unten korrigiert (meine schlechte, dachte ich ursprünglich an die KineticJs API).
FabricJS diese API-Methoden, die den z-Index von Objekten ändern:
canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
canvas.bringForward(myObject)
canvas.bringToFront(myObject)
unter der Decke verändert FabricJs den z-Index um das Objekt aus dem getObjects Entfernen() -Array und Spleißen es zurück in die gewünschte Position. Es hat eine nette Optimierung, die nach sich überschneidenden Objekten sucht.
bringForward: function (object) {
var objects = this.getObjects(),
idx = objects.indexOf(object),
nextIntersectingIdx = idx;
// if object is not on top of stack (last item in an array)
if (idx !== objects.length-1) {
// traverse up the stack looking for the nearest intersecting object
for (var i = idx + 1, l = this._objects.length; i < l; ++i) {
var isIntersecting = object.intersectsWithObject(objects[i]) ||
object.isContainedWithinObject(this._objects[i]) ||
this._objects[i].isContainedWithinObject(object);
if (isIntersecting) {
nextIntersectingIdx = i;
break;
}
}
removeFromArray(objects, object);
objects.splice(nextIntersectingIdx, 0, object);
}
this.renderAll();
},
Schritt 1: Sie preserveObjectStacking: true
verwenden können
Schritt 2: dann SendToBack verwenden, sendtofront .... fabricjs Optionen wie unten
Wenn Sie eine bestimmte festlegen möchten Ordnen Sie für alle Objekte an, anstatt ein Objekt vorwärts/rückwärts zu bewegen, sind iterative Aufrufe zum Senden/Senden nach vorne/hinten langsam.
Sie den Code von bringToFront
als Inspiration nutzen können diesen Anwendungsfall zu beschleunigen: https://github.com/kangax/fabric.js/blob/586e61dd282b22c1d50e15c0361875707e526fd8/src/static_canvas.class.js#L1468
Und dies tun:
fabric.Canvas.prototype.orderObjects = function(compare) {
this._objects.sort(compare);
this.renderAll();
}
Wo vergleichen die Sortierung definiert, wie:
function compare(x,y) {
return x.getWidth() * x.getHeight() < y.getWidth() * y.getHeight();
}
some_canvas.orderObjects(compare)
Wenn Sie kleinere Objekte nach vorne bringen möchten.
- 1. mit Fabric.js
- 2. Fabric.js Bilder in einer Pyramide
- 3. Kontroll-Z-Index in Fabric.js
- 4. Interaktive Textfelder mit Fabric.js
- 5. Fabric.js animieren Objekt/Bild
- 6. Scale fabric.js leinwand objekte
- 7. So deaktivieren Sie alle Objekte in Fabric.js
- 8. Deserialisieren eines JSON-Objekts in Fabric.js
- 9. Wie zu toDataUrl Funktion in fabric.js bearbeiten?
- 10. manipulieren Svg-Datei in einem fabric.js Canvas
- 11. fabric.js Canvas für Tastaturereignisse anhören?
- 12. Vaadin Canvas fabric.js keine Benutzerinteraktion
- 13. Wie wird die Fabric.js eingerichtet?
- 14. Raster über Fabric.js-Canvas hinzufügen
- 15. fabric.js ... wie Leinwand zum Zentrum
- 16. Fabric.js - Grouped iText nicht editierbar
- 17. Fabric.js: Leinwand mit 100% Breite möglich?
- 18. So fügen Sie Bildfilter mit fabric.js hinzu
- 19. Fabric.js wie Opazität von Linien zu setzen
- 20. Machen Fabric.js Objekt ziehbar, aber nicht "wählbar"
- 21. Wie Sie Fabric.js Objekt programmgesteuert auswählen
- 22. Fabric.js direkt von JSON zu PNG gehen
- 23. Mousedown-Ereignis auf Leinwand simulieren Fabric.js
- 24. Fabric.js: Bild Kontrollen hinter einem Overlay-Bild
- 25. Wie mache ich Freunde Fabric.js und Redux?
- 26. fabric.js Hintergrundbild Typ 'Rechteck' nicht wiederhergestellt
- 27. Wie rooftext Wirkung und Tal Texteffekt in HTML5 (oder Fabric.js)
- 28. Wie kann ich Text auf der Leinwand in Fabric.js strecken?
- 29. Download Canvas als PNG in fabric.js geben Netzwerk Fehler
- 30. Überprüfen Sie, ob Canvas in Fabric.js leer ist
Vielen Dank! Das erspart mir eine Menge Ärger. – Zwade
hat Fabricjs ein integriertes Objekt-Stack-Index-System ... dann könnte ich etwas tun wie 'var idx = some_object.get_zIndex()' – dsdsdsdsd
Sie können den Z-Index erhalten: canvas.getObjects(). IndexOf (irgendein_Objekt) . Vier Befehle stehen zur Verfügung, um die Stapelreihenfolge zu ändern: some_object.sendBackwards(), some_object.sendToBack(), some_object.bringForward() und some_object.bringToFront(). – markE