2013-02-22 19 views
18

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

36

[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(); 
    }, 
+0

Vielen Dank! Das erspart mir eine Menge Ärger. – Zwade

+0

hat Fabricjs ein integriertes Objekt-Stack-Index-System ... dann könnte ich etwas tun wie 'var idx = some_object.get_zIndex()' – dsdsdsdsd

+6

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

0

Schritt 1: Sie preserveObjectStacking: true verwenden können

Schritt 2: dann SendToBack verwenden, sendtofront .... fabricjs Optionen wie unten

Answered over here

1

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.