KineticJS एनिमेटेड आकृतियों के अंदर का पता लगाने क्लिक

Question

ठीक है, मैं मैं चतुर होने की कोशिश की मानता: मैंने सोचा था कि अगर मैं आकार के drawFunc संपत्ति overrode मैं बस एक आयत के अंदर जो कुछ भी और अभी भी उपयोग KineticJS के क्लिक पहचान आकर्षित कर सकता है। यहाँ मेरी प्रयास है:

var shape = new Kinetic.Shape({ 
    drawFunc: function(context) { 
    var id = 26; // Id of a region inside composite image. 
    context.beginPath(); 
    context.rect(0, 0, w, h); 
    context.closePath(); 
    this.fill(context); 
    this.stroke(context); 
    context.drawImage(copyCanvas, (id % 8) * w, flr(id/8) * h, 
     w, h, 0, 0, w/2, h/2); 
    }, 
    draggable: true 
}); 

तो, विचार एक आयत बनाएं, और कुछ (एक बनावट की तरह छोड़कर यह समय-समय पर बदलता है क्योंकि copyCanvas ही बदल जाता आयत की चोटी पर आकर्षित करने के लिए, drawImage() का उपयोग किया गया)। इस बीच, मुझे अभी भी 'बस काम' करने के लिए इवेंट हैंडलिंग (विशेष रूप से ड्रैग-एन-ड्रॉप) की उम्मीद थी। खैर, यहां क्या होता है: आयत का हिस्सा मेरे drawImage() द्वारा कवर नहीं किया गया है, सही ढंग से क्लिक का पता लगाता है। हालांकि, छवि द्वारा कवर आयताकार का चौथाई क्लिक पर प्रतिक्रिया देने से इंकार कर देता है! अब, मेरा सवाल है क्यों? मैंने KineticJS कोड में खोला, और मुझे देखा कि पहचान पर क्लिक करने का मतलब बस एक बफर को चित्रित करना और देखना है कि किसी दिए गए एक्स, वाई बिंदु में शून्य-शून्य अल्फा है। मैं नहीं देख सकता कि यह मेरे आयत के शीर्ष पर एक छवि को चित्रित करने से कैसे प्रभावित हो सकता है।

कोई विचार क्या चल रहा है?

Answer 1

ठीक है, तो मैं आगे चला गया और स्रोत कोड को देखा। यहां निश्चित उत्तर:

काइनेटिकजेएस आरजीबी रंगों से वस्तुओं को आकार देने के लिए वैश्विक मानचित्र का उपयोग करके बनाए गए प्रत्येक आकार में एक यादृच्छिक और अद्वितीय आरजीबी रंग असाइन करता है। आकार के draw() फ़ंक्शन को दो बार कहा जाता है: एक बार 'असली' कैनवास के साथ, और एक बार 'बफर' कैनवास के साथ हिट डिटेक्शन के लिए उपयोग किया जाता है। 'बफर' कैनवास का उपयोग करते समय, KineticJS स्ट्रोक को स्विच करता है और दिए गए आकार के अद्वितीय आरजीबी रंग में रंग भरता है। परत पर सभी आकारों के लिए एक ही 'बफर' कैनवास का उपयोग किया जाता है। इस प्रकार हिट डिटेक्शन बस किसी दिए गए बिंदु के आरजीबी मूल्य को पढ़ता है और वैश्विक मानचित्र में इसी आकार को देखता है। अब, मेरे उदाहरण में मैंने एक छवि को इस तरह से खींचा जिसने हिट डिटेक्शन के लिए इस्तेमाल किए गए रंगों के किनेटिकजेएस की जुगलिंग को बाधित कर दिया। इस प्रकार, जब मैंने छवि क्षेत्र पर क्लिक किया, तो KineticJS ने बफर कैनवास पर कुछ अज्ञात आरजीबी रंग देखा जो इसके लिए निर्दिष्ट ज्ञात आकार नहीं था।

समाधान 'बफ़र' (या 'हिट का पता लगाने') चरण के लिए छवि आकर्षित करने के लिए नहीं है: एक सरल आयत करेंगे।

var width = 200; 
var height = 100; 
var myShape = new Kinetic.Shape({ 
    drawFunc: function(context) { 
    if (layer.bufferCanvas.context == context) { 
     context.beginPath(); 
     context.rect(0, 0, width, height); 
     context.closePath(); 
     this.fill(context); 
     this.stroke(context); 
    } else { 
     context.drawImage(someCanvasWithAnythingOnIt, 0, 0, width, height, 
     0, 0, width, height); 
    } 
    }}); 

मैं अपने ही इनाम जमा कर सकते हैं: यदि आप सोच रहे हैं, यहाँ drawFunc के लिए सही कोड है?

Answer 2

मैं आपकी समस्या को आदेश में निहित है लगता है। आपके द्वारा खींचे जाने वाले प्रत्येक ऑब्जेक्ट से जुड़ी गहराई होती है और डिफ़ॉल्ट ऑर्डरिंग स्टैक की तरह होती है, अंतिम खींचना शीर्ष पर है। अब जब आपने कोड ड्रा संशोधित किया है, तो आकृति ड्रा फ़ंक्शन के अंदर 2 ड्रॉ बनाते हैं, मुझे अभी भी लगता है कि ऑर्डरिंग संरक्षित है और इसलिए, ऑब्जेक्ट इनपुट का पता लगाने में सक्षम नहीं है। ऑर्डर बदलने का प्रयास करें, यानी पहले चित्र खींचें और फिर आयताकार देखें और देखें कि समस्या हल हो गई है या नहीं। अन्यथा, उदाहरण के लिए jsFiddle साझा करें।