कैनवास ग्राफिक तत्वों पर पूर्ण-विकसित माउस ईवेंट

समस्या

जावास्क्रिप्ट + कैनवस का उपयोग करते हुए ग्राफिक्स के विकास में शामिल लोगों ने लंबे समय तक किसी भी ग्राफिक तत्वों पर माउस घटनाओं के प्रसंस्करण की समस्या पर ध्यान दिया है।

समस्या के कई समाधान हैं:

1. उन्हें बिल्कुल भी संसाधित न करें, अर्थात, आपके ग्राफिक्स इंटरैक्टिव नहीं हैं और आपको इसकी आवश्यकता नहीं है
2. प्रत्येक आकृति के लिए एक आयत की गणना करें, इसे मेमोरी में संग्रहीत करें, और घटनाओं को ट्रिगर करें जब कर्सर इन आयतों में प्रवेश करता है
3. आयत, वृत्त, रेखाओं आदि के लिए विभिन्न गणितीय सूत्रों का उपयोग करते हुए, प्रत्येक ग्राफिक तत्व को व्यक्तिगत रूप से स्वीकृत करें।

इन सभी विधियों को कुछ परिस्थितियों में जीवन का अधिकार है, लेकिन जब घटनाओं का पता लगाने की आवश्यकता होती है (हम विकल्प 1 को हटाते हैं), जब आकार अक्सर आयताकार नहीं होते हैं, तो वे मुड़ते हैं, और अन्य परिवर्तन (विकल्प 2 भी उपयुक्त नहीं है) जब आकार ज्यामितीय रूप से सही नहीं होते हैं, उदाहरण के लिए, लाइनों को विभाजित करके चिकना किया जाता है, अवतल चेहरों के साथ बहुभुज (विकल्प 3 भी भुला दिया जाता है), और सबसे महत्वपूर्ण बात, जब ये आंकड़े अनगिनत हो जाते हैं, और प्रत्येक के निर्देशांक को संग्रहीत करते हैं, प्रत्येक माउसवॉएट पर उन्हें सॉर्ट करना ओवरहेड हो जाता है, एक और तरीका बचाव के लिए आता है।

समाधान दृष्टिकोण

हमें यह जानने की आवश्यकता है कि पिक्सेल ने हमारे चित्र पर कर्सर को कैसे मारा या नहीं। ऐसा करने के लिए, हम निम्न कार्य करेंगे:
आकार बनाते समय, इसे एक विशिष्ट संख्यात्मक पहचानकर्ता निर्दिष्ट करें, उदाहरण के लिए, 1. अब हम इस पहचानकर्ता को RGB HEX अंकन में एक रंग में परिवर्तित करेंगे - #000001 ।

आइए उस परत के लिए एक नया कैनवास तत्व बनाएं, जिस पर आकृति स्थित है, लेकिन हम इसे DOM में नहीं जोड़ेंगे, यह हमारी पृष्ठभूमि का कैनवास है।
मुख्य कैनवास पर आकृति को चित्रित करते समय, इसे पृष्ठभूमि पर ड्रा करें, लेकिन उस रंग में जो इसके पहचानकर्ता (सीमा रेखा सहित) से आया था।
अब यह स्पष्ट हो जाता है कि यदि ड्राइंग ऑर्डर का सम्मान किया जाता है, तो पृष्ठभूमि के कैनवास पर आकृतियाँ एक ही क्रम में वास्तविक कैनवास पर एक-दूसरे को ओवरलैप करेंगी और जब माउस कर्सर मुख्य कैनवास के साथ आगे बढ़ता है, तो आप पृष्ठभूमि के कैनवास के पिक्सेल रंग के निर्देशांक का पता लगा सकते हैं, जो आकार पहचानकर्ता है। जो हमें स्पष्ट रूप से यह कहने की अनुमति देता है कि कर्सर आकृति में गया या उसे छोड़ दिया गया।

नुकसान

जब माउस चलता है, तो हम इसके तहत पिक्सेल का रंग निर्धारित करते हैं, और यदि यह अपारदर्शी (Alpha = 255) , तो आकार पहचानकर्ता को निर्धारित करें और घटनाओं के साथ काम करें।

लेकिन सब कुछ इतना रसपूर्ण नहीं है। 3 मुख्य समस्याएं हैं:

1. चिकना करना

तथ्य यह है कि डिफ़ॉल्ट रूप से सभी ब्राउज़र रेंडरिंग करते समय एंटी-अलियासिंग का उपयोग करते हैं, जिसका अर्थ है कि आंकड़े के सभी पिक्सेल पूरी तरह से अपारदर्शी नहीं होंगे और जिस रंग की हमें ज़रूरत है।


समाधान:
यह आंकड़ा 2 पिक्सेल की सीमाओं को खींचना आवश्यक है (या इस सीमा के अभाव में सिर्फ 2 पिक्सेल)। यह आसपास के पिक्सेल में अतिरिक्त शोर पैदा करेगा, लेकिन चूंकि हमारे लिए वे महत्वपूर्ण नहीं हैं और उपयोगकर्ता के लिए भी दृश्यमान नहीं हैं, इसलिए यह उपेक्षित हो सकता है।

2. रंगों का संलयन

जब 2 आकार प्रतिच्छेद करते हैं, तो समान चौरसाई पूरी तरह से अपारदर्शी पिक्सेल बना सकती है, जिसका रंग एक आकार से दूसरे के रंग में संक्रमणकालीन होगा। इसी समय, इस बात की बहुत कम संभावना है कि यह रंग पूरी तरह से अलग आकृति का संकेत देगा, जो पूरी तरह से अलग जगह पर स्थित है। वास्तव में काम करने वाले एप्लिकेशन में, यह संभावना काफी कम है, लेकिन क्या हम हर चीज के लिए प्रदान करना चाहते हैं?


समाधान:
पहचानकर्ता की प्रामाणिकता को सत्यापित करने के लिए, आपको 4 पिक्सेल का रंग पता करने की आवश्यकता है - ऊपर, नीचे, दाएं और बाएं। यदि उनमें से प्रत्येक समान रंग है या पूरी तरह से पारदर्शी नहीं है, तो पहचानकर्ता विश्वसनीय है।

3. छवियाँ

मामले में जब हम छवियों के साथ काम करते हैं, तो यह स्पष्ट है कि आपको कुछ प्रकार के छवि प्रोसेसर बनाने की आवश्यकता है जो getImageData अपने पिक्सेल डेटा को getImageData माध्यम से getImageData और प्रत्येक अपारदर्शी पिक्सेल को आकृति पहचानकर्ता के रंग से बदल देता है, और प्रत्येक पारभासी इसे एक पारदर्शी एक के साथ बदल देता है।

इस मामले में, स्पष्ट रूप से कोई समस्या नहीं है, केवल 3 बारीकियां हैं जो ध्यान देने योग्य हैं।

• सबसे पहले, छवि को संसाधित करने के लिए, हमें एक और कैनवस तत्व बनाने की ज़रूरत है जो प्रसंस्करण फ़ंक्शन को प्रदर्शित करने के लिए छवि के समान है और इसे पृष्ठभूमि कैनवास में छवि स्रोत के रूप में उपयोग करें। उपयोग के बाद आपको हर बार इस तत्व को हटाना चाहिए, या एक आम बनाना चाहिए, और प्रत्येक नई तस्वीर के लिए इसका आकार बदलना चाहिए।
  
• दूसरा - इमेज प्रोसेसिंग समय इसके आकार के समानुपाती है, क्योंकि प्रत्येक पिक्सेल को बायपास करना आवश्यक है। निश्चित रूप से कहा जाने वाला कुछ भी नहीं है, यह सब प्रसंस्करण कार्य पर निर्भर करता है।
• तीसरा - उन छवियों के मामले में जो उस डोमेन से नहीं मिलीं जिस पर कैनवास तत्व वाला पृष्ठ स्थित है, ब्राउज़र सुरक्षा काम करेगी। आपको SECURITY_ERR त्रुटि को संभालना होगा, और छवि के साथ आयत के रूप में काम करना होगा।

कार्यान्वयन

इसलिए, हमारे पास पहले से ही एक पृष्ठभूमि कैनवास है, जो सही रंगों में आकृतियां हैं। कर्सर के नीचे पिक्सेल का रंग कैसे प्राप्त करें? नीचे एक सार कोड दर्शाया गया है कि इसके तहत पिक्सेल प्राप्त करने के लिए कर्सर के निर्देशांक को कैसे जाना जाता है:

 //x, y -  ,   var ctx = bgCanvas.getContext("2d"); var pixel = ctx.getImageData(x, y, 1, 1).data; //  4 ,  R, G, B  A,  var isOpaque = pixel[3] === 255; //     

अगला, किसी भी सुविधाजनक तरीके से, आपको चैनलों से एक रंग प्राप्त करने की आवश्यकता होती है, जिसकी तुलना आकृति पहचानकर्ता के साथ की जा सकती है।
घटना तंत्र को लागू करने की सूक्ष्मता और भंडारण और प्रसंस्करण पहचानकर्ताओं को विशेष रूप से यहां वर्णित नहीं किया गया है, क्योंकि अनगिनत विकल्प हैं।

स्रोत

निम्नलिखित संसाधन का उपयोग स्रोत के रूप में किया गया था:
http://tschaub.net/blog/2011/03/31/canvas-hit-detection.html

लेख अनुवाद के अधिकार का दावा नहीं करता है, लेकिन यह मूल संसाधन की अधिकांश सामग्रियों का उपयोग करता है।