كيف أحصل على إحداثيات x/y للنقطة الأولى والأخيرة من القوس المرسوم بالنسبة إلى الزاوية اليسرى العلوية من القماش؟
-
01-10-2019 - |
سؤال
لدي قماش مربع بعرض 100 وارتفاع 100. داخل هذا المربع أرسم قوسًا مثل ذلك:
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,100,100) // clears "myCanvas" which is 100pixels by 100 pixels
ctx.beginPath();
ctx.arc( 50, 50, 30, 0, Math.PI*2/6 , false )
ctx.stroke();
والسؤال هو: كيف يمكنني الحصول على إحداثيات X/Y للنقطة الأولى والأخيرة من الخط المرسوم بالنسبة إلى الزاوية اليسرى العلوية من القماش؟
المحلول
نقطة الانطلاق بشكل تافه (x + radius, y)
. نقطة النهاية هي ، عن طريق المثلثات البسيطة ، (x + radius*cos(angle), y + radius*sin(angle))
. لاحظ أن نقطة البداية في هذه الحالة هي حالة خاصة لنقطة النهاية الأكثر عمومية ، مع angle
يساوي الصفر. يجب أيضًا تقريب هذه القيم إلى أقرب عدد صحيح ، لأسباب واضحة.
(لاحظ أن هذا ينطبق فقط عندما يكون anticlockwise
الحجة خاطئة ، وافتراض قياس جميع الإحداثيات من أعلى اليسار. إذا anticlockwise
صحيح ، عكس علامة المكون الثاني من إحداثي y. إذا تم قياس الإحداثيات من زاوية أخرى ، فقم بتطبيق الحساب البسيط على تصحيح هذا. لاحظ أيضًا أن هذا متخلف تمامًا عن أي عالم رياضيات حقيقي.)