Fabric.js

Question

में लेयरिंग कैनवास ऑब्जेक्ट्स आधिकारिक एपीआई के माध्यम से Fabric.js कैनवास पर लेयर ऑब्जेक्ट्स का कोई तरीका है? अभी मुझे ऐसा करने का एकमात्र तरीका है मैन्युअल रूप से canvas._objects के माध्यम से पुन: व्यवस्थित करना और उन्हें पुन: क्रमबद्ध करना ताकि वे एक विशिष्ट क्रम में खींचे जाएं। क्या ऐसा करने का कोई बेहतर तरीका है जो वस्तु को तोड़ने (संभावित रूप से) नहीं करता है?

Answer 1

[संपादित करें] मैंने नीचे मेरी जानकारी को सही किया है (मेरा बुरा, मैं मूल रूप से KineticJs api के बारे में सोच रहा था)।

FabricJS इन API तरीकों कि वस्तुओं की z- सूचकांक बदल दिया गया है:

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

कवर के तहत, FabricJs (getObjects से वस्तु को हटाने) सरणी और यह स्प्लिसिंग में वापस द्वारा z- सूचकांक में परिवर्तन वांछित स्थिति। यह एक अच्छा अनुकूलन है जो वस्तुओं को छेड़छाड़ करने की जांच करता है।

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

चरण 1: आप preserveObjectStacking: true

चरण 2 का प्रयोग कर सकते हैं: तो sendtoback उपयोग करते हैं, sendtofront .... नीचे

Answered over here

Answer 3

तरह fabricjs विकल्प आप एक विशिष्ट सेट करना चाहते हैं सभी ऑब्जेक्ट्स के लिए ऑर्डर करना, एक ऑब्जेक्ट को आगे/पीछे ले जाने की बजाय, सामने/पीछे लाने/भेजने के लिए पुनरावर्तक कॉल धीमे होते हैं।

आप प्रेरणा के रूप में bringToFront के कोड का उपयोग कर सकते उपयोग के इस मामले में तेजी लाने के: https://github.com/kangax/fabric.js/blob/586e61dd282b22c1d50e15c0361875707e526fd8/src/static_canvas.class.js#L1468

और यह कार्य करें:

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

कहाँ तुलना परिभाषित करता है छंटाई, जैसे:

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

some_canvas.orderObjects(compare) 

यदि आप सामने की ओर छोटी वस्तुओं को लाना चाहते हैं।