Kumaş.js katmanı Fabric.js

Question

Resmi API aracılığıyla bir Fabric.js kanvasındaki nesneleri katmanın bir yolu var mı? Şu anda bunu yapmamın tek yolu, canvas._objects aracılığıyla elle yineleme yapmak ve bunları belirli bir sırayla çizilmek üzere yeniden düzenlemek. Bunu yapmak için (potansiyel olarak) nesneyi kırmayan daha iyi bir yolu var mı?

Answer 1

[Düzenle] Aşağıdaki bilgilerimi düzelttim (kötüyüm, aslında KineticJs api'yi düşünüyordum).

FabricJS nesnenin z endeksi değiştirmek bu API yöntem vardır: kapaklar altında

canvas.sendBackwards(myObject) 
canvas.sendToBack(myObject) 
canvas.bringForward(myObject) 
canvas.bringToFront(myObject) 

, FabricJs) (getObjects nesneyi çıkarılması geri dizi ve ekleme de de z-indeksini değiştirmektedir istenen pozisyon. Kesişen nesneleri kontrol eden güzel bir optimizasyona sahiptir.

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

Answer 2

adım 1: preserveObjectStacking: true

2. adımı kullanın edebilirsiniz: Belirli bir ayarlamak istiyorsanız o zaman SendToBack kullanın sendtofront .... aşağıda

Answered over here

Answer 3

gibi seçenekleri fabricjs Tüm nesneler için sipariş vermek, bir nesneyi ileri/geri taşımak yerine, öne/arkaya getirmek/göndermek için yinelemeli çağrılar yavaştır. https://github.com/kangax/fabric.js/blob/586e61dd282b22c1d50e15c0361875707e526fd8/src/static_canvas.class.js#L1468

Ve bunu yapmanın:

Sen ilham kaynağı olarak bringToFront kodunu kullanabilirsiniz

bu kullanım durumunu hızlandırmak için tanımlar karşılaştırmak

fabric.Canvas.prototype.orderObjects = function(compare) { 
    this._objects.sort(compare); 
    this.renderAll(); 
} 

sıralama gibi:

function compare(x,y) { 
    return x.getWidth() * x.getHeight() < y.getWidth() * y.getHeight(); 
} 

some_canvas.orderObjects(compare) 

Ön tarafa daha küçük nesneler getirmek isterseniz.