HTML5 قماش Hittesting

Question

لدي بعض الصور مرسومة على قماش HTML5 وأريد التحقق مما إذا كانت قد تم ضربها على النقر على الماوس. يبدو سهلاً ، لدي حدود الصور ، ولكن يتم تحويل الصور (ترجمة وتوسع). لسوء الحظ ، لا يحتوي السياق على طريقة للحصول على مصفوفة التحويل الحالية ، وأيضًا ، لا يوجد واجهة برمجة تطبيقات لضرب المصفوفات. يبدو أن الحل الوحيد هو تتبع التحويلات بنفسي وتنفيذ مضاعفة المصفوفة. يتم الترحيب بالاقتراحات.

Answer 1

هذه مشكلة شائعة في عالم الرسومات ثلاثي الأبعاد (OpenGL) أيضًا.

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

هذه طريقة شائعة الاستخدام في عالم OpenGL. يمكنك العثور على أوصافها بمصطلحات googling مثل "اختيار كائن OpenGL". هنا واحدة من نتائج البحث العديدة.

تحديث: تشمل مواصفات HTML5 Canvas الآن ضرب المناطق. لست متأكدًا إلى أي درجة تدعمها المتصفحات حتى الآن.