2010-05-28 16 views
12

क्या कैनवास तत्व img's map के बराबर है, तो आप कैनवास तत्व पर क्लिक करने योग्य क्षेत्रों को परिभाषित कर सकते हैं?करता है (एचटीएमएल 5) कैनवास के पास एक छवि मानचित्र के बराबर है?

यहां पृष्ठ के आधे रास्ते के नक्शे का संक्षिप्त उल्लेख है: http://www.w3.org/TR/html5/the-canvas-element.html, लेकिन मुझे इसके बारे में कुछ और नहीं मिल रहा है।

उत्तर

14

यहां तक ​​कि यदि नहीं है, तो कैनवास पर स्थित एक पारदर्शी छवि पर एक छवि मानचित्र आपको प्राप्त करने की आवश्यकता नहीं है?

+0

यह एक अच्छा विचार है। –

2

क्या आपने कैनवास के बजाय svg का उपयोग करने पर विचार किया है? Svg के साथ ग्राफ़िक में सक्रिय क्षेत्रों की पहचान करने के लिए आवश्यक सभी जानकारी हो सकती है, और आप ईवेंट हैंडलर को जैसे ही आप HTML तत्वों पर संलग्न कर सकते हैं।

कैसे आप svg आकार की ज्यामिति के विभिन्न भागों पर mouseevents पता लगा सकते हैं के कुछ उदाहरण:

http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-08-f.html

http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/interact-pevents-09-f.html

4

आपकी समस्या का समाधान के रूप में: मैं करने के लिए एक क्लिक करें घटना देते हैं कैनवास और माउस-इवेंट में मैं माउस-कॉर्ड की जांच करता हूं, फिर बहुभुज के साथ संयुक्त क्षेत्रों की एक साधारण सूची आप टकराव परीक्षण कर सकते हैं। आयताकार एक शुरुआत होगी, लेकिन यदि आपको विशेष रूप से विशेष क्षेत्रों की आवश्यकता है, तो एक और अधिक उन्नत टकराव परीक्षण करना होगा।

फ्लैश में पिक्सेल परिशुद्धता मानचित्रों के लिए एक त्वरित समाधान का उपयोग किया गया है, एक दूसरा छुपा ओवरले बिटमैप बनाना है, जिसे आप दृश्यमान छवि पर क्लिक करते समय लुकअप के लिए उपयोग करते हैं।

पुरानी साहसिक खेलों में इसका एक ही तकनीक उपयोग किया जाता है। प्रत्येक "क्षेत्र/वस्तु/लिंक" का अपना पिक्सेल रंग होता है। और फिर आप मिलान करने वाले रंग के साथ वस्तुओं की सूची रखें।

एक बार जब आप mousecoord तहत pixelcolor है, तो आप तालिका .. और बिंगो में एक बहुत ही त्वरित देखने कर सकते हैं ...

सबसे पहले आप स्पष्ट शून्य के (काला) के साथ "छवि पर क्लिक करें" और thats "कोई लिंक" के बराबर नहीं, फिर आप प्रत्येक क्षेत्र को एक विशेष रंग के साथ आकर्षित करते हैं और इस रंग को सूची में संग्रहीत करते हैं।

पूछें कि आपको और सहायता चाहिए या नहीं। मुझे उम्मीद है कि यह एक उपयोगी जवाब था।

2

Cake पर एक नज़र डालें। यह कैनवास के लिए एक दृश्य ग्राफ प्लग-इन है। आप जो खोज रहे हैं उसके लिए थोड़ा जटिल हो सकता है, लेकिन आप केक लपेटा कैनवास ऑब्जेक्ट्स में ईवेंट जोड़ सकते हैं।