اجعل الهدف المرسوم واختبار المؤشر يشتركان في خريطة إحداثية واحدة

اطرح أصل اللوحة وقم بقياس النقطة

ابدأ باستخدام clientX وclientY الخاصين بالحدث والمستطيل الذي تم إرجاعه بواسطة canvas.getBoundingClientRect(). تم وضع المستطيل بالنسبة إلى إطار العرض، لذا اطرح منه الأيسر والأعلى قبل القياس. إذا كانت اللعبة المنطقية هي 800 × 450 والمستطيل المعروض هو 400 × 225، فاضرب x وy المحلي في اثنين. يتم بعد ذلك تعيين المؤشر الموجود في المركز المعروض إلى الوضع المنطقي (400، 225)، بغض النظر عن موضع تمرير الصفحة. (devicePixelRatio)

استخدم مستطيل المحتوى الفعلي، وليس الافتراضات المستندة إلى عرض النافذة. قم بحساب حدود CSS أو المساحة المتروكة خارج اللوحة القماشية، ثم قم بتحديث التعيين بعد تغيير الحجم أو تغيير الاتجاه. إذا كانت اللعبة تستخدم إزاحة الكاميرا، أو تنسيق letterbox، أو تحويل عالم آخر، فقم بعكس هذه العمليات بترتيب عكسي قبل مقارنة النقطة بمناطق الاستجابة للنقر.

اختبار السطح بأكمله، بما في ذلك المساحة الميتة

ضع علامة تقاطع مؤقتة في موقع المؤشر المحول واختبر جميع زوايا اللوحة الأربع والمركز وكل حافة للهدف. يتمثل فحص المعايرة البسيط في النقر فوق مركز الدائرة المرسومة والتأكد من أن النقطة العالمية المبلغ عنها تقع بالقرب من مركز الدائرة. ثم انقر خارجه مباشرةً للتأكد من أن حد النتيجة يطابق هامش التسامح المقصود. تقوم MDN بتوثيق clientX باعتباره مرتبطًا بإطار العرض وgetBoundingClientRect() كحدود عناصر مرتبطة بإطار العرض؛ يؤدي إقران هذه القياسات إلى تجنب خلط مسافات الإحداثيات.

استمر في العرض واضغط على المناطق المرتبطة

قم بتخزين الموقع العالمي للهدف وأبعاده مرة واحدة، ثم استخدم تلك البيانات لرسمه واختبار المؤشر مقابله. تجنب الاحتفاظ بإحداثيات شاشة منفصلة يتم إدخالها يدويًا للرمز المرئي ومنطقة النقر. أعد الاختبار بعد تغيير مقياس اللوحة القماشية، أو حجم CSS، أو نسبة بكسلات الجهاز، أو إزاحة الكاميرا. إذا كان مسبار الإحداثيات صحيحًا ولكن الهدف ما زال مفقودًا، فافحص حسابات الشكل وترتيب الإدخال بدلاً من إضافة إزاحات بكسل عشوائية.

أسئلة عن ⁨إحداثيات اختبار ضرب القماش⁩