में लेयरिंग कैनवास ऑब्जेक्ट्स आधिकारिक एपीआई के माध्यम से Fabric.js कैनवास पर लेयर ऑब्जेक्ट्स का कोई तरीका है? अभी मुझे ऐसा करने का एकमात्र तरीका है मैन्युअल रूप से canvas._objects के माध्यम से पुन: व्यवस्थित करना और उन्हें पुन: क्रमबद्ध करना ताकि वे एक विशिष्ट क्रम में खींचे जाएं। क्या ऐसा करने का कोई बेहतर तरीका है जो वस्तु को तोड़ने (संभावित रूप से) नहीं करता है?Fabric.js
उत्तर
[संपादित करें] मैंने नीचे मेरी जानकारी को सही किया है (मेरा बुरा, मैं मूल रूप से 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();
},
चरण 1: आप preserveObjectStacking: true
चरण 2 का प्रयोग कर सकते हैं: तो sendtoback उपयोग करते हैं, sendtofront .... नीचे
तरह 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)
यदि आप सामने की ओर छोटी वस्तुओं को लाना चाहते हैं।
- 1. Fabric.js
- 2. कैनवास Fabric.js में निर्देशांक
- 3. जारी करना/Fabric.js
- 4. Fabric.js canvas.toDataURL() अजाक्स
- 5. Fabric.js कैसे सेट करें?
- 6. कैनवास में माउस ऑफसेट [fabric.js]
- 7. Fabric.js में नियंत्रण जेड-इंडेक्स
- 8. Fabric.js - नि: शुल्क एक आयत बनाएं
- 9. fabric.js ... कैनवास केंद्रित करने के लिए कैसे
- 10. Fabric.js - कई छवियों ड्राइंग के साथ समस्या यह zindex
- 11. Fabric.js - कस्टम विशेषताओं के साथ सर्वर पर कैनवास को कैसे सहेजना है
- 12. fabric.js में एक निर्दिष्ट बिंदु के चारों ओर घुमाने के लिए कैसे?
- 13. fabric.js का उपयोग कर कैनवास तत्वों के स्केलिंग पॉइंट्स को मैं कैसे अक्षम कर सकता हूं?
- 14. डार्ट एचटीएमएल 5 कैनवास पुस्तकालय?
- 15. कपड़े जेएस
- 16. जावास्क्रिप्ट कैनवास पुस्तकालयों का वर्तमान राज्य?
- 17. बैकबोन.जेएस को बाध्य करने के लिए कैसे एक HTML5 कैनवास के अंदर प्रस्तुत दृश्य पर क्लिक करें?
- 18. फैब्रिकजेएस कैनवास तत्वों को जोड़ने के बाद "अटक गया"
धन्यवाद! यह मुझे बहुत परेशानी बचाता है। – Zwade
क्या फ़ेग्जज में अंतर्निहित ऑब्जेक्ट स्टैक इंडेक्स सिस्टम है ... तो मैं कुछ var varx = some_object.get_zIndex() ' – dsdsdsdsd
जैसे कुछ कर सकता हूं आप z-index: canvas.getObjects()। IndexOf (some_object) प्राप्त कर सकते हैं। । स्टैकिंग ऑर्डर बदलने के लिए चार कमांड उपलब्ध हैं: some_object.sendBackwards(), some_object.sendToBack(), some_object.bringForward(), और some_object.bringToFront()। – markE