एचटीएमएल 5 कैनवास हिटस्टिंग

Question

मेरे पास HTML5 कैनवास पर खींची गई कुछ छवियां हैं और मैं यह देखना चाहता हूं कि वे माउस क्लिक पर हिट हैं या नहीं। आसान लगता है, मेरे पास छवियों की सीमाएं हैं, हालांकि छवियों को बदल दिया गया है (अनुवादित और स्केल किया गया)। दुर्भाग्यवश, संदर्भ में वर्तमान ट्रांसफॉर्म मैट्रिक्स प्राप्त करने का कोई तरीका नहीं है, और साथ ही, मैट्रिक्स गुणा के लिए कोई एपीआई नहीं है। लगता है कि एकमात्र समाधान स्वयं को ट्रांसफॉर्म का ट्रैक रखना और मैट्रिक्स गुणा को लागू करना है। सुझावों का स्वागत है।

Answer 1

यह 3 डी (ओपनजीएल) ग्राफिक्स दुनिया में भी एक आम समस्या है।

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

ओपनजीएल दुनिया में यह आमतौर पर उपयोग की जाने वाली विधि है। आप "opengl object picking" जैसे गुगलिंग शब्दों द्वारा इसका विवरण पा सकते हैं। यहां one of the many search results है।

अद्यतन: एचटीएमएल 5 कैनवास स्पेक में अब hit regions शामिल है। मुझे यकीन नहीं है कि ब्राउज़र में अभी तक कौन सी डिग्री समर्थित हैं।