खींचे गए लक्ष्य और सूचक परीक्षण को एक समन्वय मानचित्र साझा करें

कैनवास के मूल को घटाएं और बिंदु को स्केल करें

ईवेंट के clientX और clientY और canvas.getBoundingClientRect() द्वारा लौटाए गए आयत से प्रारंभ करें। आयत व्यूपोर्ट के सापेक्ष स्थित है, इसलिए स्केलिंग से पहले इसके बाएँ और शीर्ष को घटाएँ। यदि तार्किक खेल 800 गुणा 450 है और प्रदर्शित आयत 400 गुणा 225 है, तो स्थानीय x और y को दो से गुणा करें। प्रदर्शित केंद्र पर एक सूचक पृष्ठ की स्क्रॉल स्थिति की परवाह किए बिना, तार्किक (400, 225) पर मैप करता है। (clientX) (clientY) (canvas.getBoundingClientRect()) (devicePixelRatio)

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

मृत स्थान सहित संपूर्ण सतह का परीक्षण करें

परिवर्तित सूचक स्थान पर एक अस्थायी क्रॉसहेयर रखें और सभी चार कैनवास कोनों, केंद्र और लक्ष्य के प्रत्येक किनारे का परीक्षण करें। एक साधारण अंशांकन जांच में खींचे गए वृत्त के केंद्र पर क्लिक करना और पुष्टि करना है कि रिपोर्ट किया गया विश्व बिंदु वृत्त के केंद्र के निकट है। फिर यह जांचने के लिए इसके ठीक बाहर क्लिक करें कि हिट सीमा इच्छित सहनशीलता मार्जिन से मेल खाती है। MDN के अनुसार clientX व्यूपोर्ट के सापेक्ष होता है और getBoundingClientRect() भी व्यूपोर्ट के सापेक्ष एलिमेंट की सीमाएँ लौटाता है; उन मापों को युग्मित करने से अलग-अलग समन्वय प्रणालियों के मिश्रण से बचा जा सकता है।

रेंडरिंग और हिट क्षेत्रों को लिंक करके रखें

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

⁨कैनवास हिट परीक्षण निर्देशांक⁩ से जुड़े सवाल