حساب الزوايا النسبية للماوس باستخدام JavaScript ودالة atan2()

الزاوية المطلقة

لنبدأ ببساطة ولنرَ كيف يمكننا حساب الزاوية المطلقة من الأصل (0، 0) أي الزاوية في الركن الأيسر العلوي للشاشة.

قبل أن نتمكن من حساب الزاوية، نحتاج إلى تتبع موقع الماوس على الصفحة. دعنا نضع مستمع حدث لتحريك الماوس ونخزن الموقع:

addEventListenner("mousemove", e => {
    const mouseX = e.pageX
    const mouseY = e.pageY
})

الآن بعد أن حصلنا على موقع الماوس، يمكننا تصوره كما يلي:

يمكنك أن ترى إلى أين نحن ذاهبون، حصلنا على مثلث قائم الزاوية تمامًا، والعمل مع المثلثات يتطلب علم المثلثات، لذا نحتاج إلى إيجاد الدالة التي تعطينا الزاوية بناءً على البيانات التي لدينا، وهذه الدالة هي دالة الظل (tangent).

const angle = Math.atan(mouseY / mouseX)

رائع! حصلنا على الزاوية، ولكن هناك مشكلة في هذه الطريقة لأنها تعيد قيمة بين $]-\frac{\pi }{2}'',''\frac{\pi }{2}[$، مما يعني نصف دورة فقط ولكننا نحتاج إلى دورة كاملة، والسبب في ذلك هو أن $\frac{y}{x}$ يمكن أن تعطي نفس الإخراج مع مدخلين مختلفين (مثلًا، $\frac{\mathrm{-y}}{x}=\frac{y}{\mathrm{-x}};\frac{y}{x}=\frac{\mathrm{-y}}{\mathrm{-x}}$) لذلك لا يمكن للدالة إعطاء الزاوية الصحيحة دون معرفة أي المحاور سالب وأيها موجب.

حل هذه المشكلة بسيط، فقط استخدم دالة atan2() ومرر y و x كمعاملات بحيث تتمكن الدالة من تحديد الربع الذي تعمل فيه.

Math.atan2(mouseY, mouseX)

الزاوية النسبية

حساب الزاوية النسبية لنقطة أخرى يشبه إلى حد ما الطريقة السابقة. لنفترض أن لدينا نقطة p1(2، 3) والماوس حاليًا في p2(5، 1) كما هو موضح أدناه:

يمكننا الحصول على متجه من p1 موجه نحو الماوس p2 عن طريق طرح p1 من p2:

كما ترى، لدينا مثلث قائم الزاوية آخر للعمل معه وحساب الزاوية بنفس الطريقة،

const dy = mouseY - p1.y
const dx = mouseX - p1.x
const angle = Math.atan2(dy, dx)

التحويل من الراديان إلى الدرجات

تُرجع هذه الدوال الزاوية بالراديان، وهو ما قد يكون صعبًا قراءته وغير مريح، ولكنها الطريقة التي ستعمل بها وراء الكواليس. ومع ذلك، إذا كنت ترغب في عرض الزاوية، فمن المحتمل أن ترغب في تحويلها إلى درجات كما نحن معتادون عليها، وللقيام بذلك فقط استخدم هذه الصيغة: $\mathrm{rad}\times \frac{180}{\pi }$

const degrees = angle * 180 / Math.PI

أمثلة