كيف أحصل على إحداثيات x/y للنقطة الأولى والأخيرة من القوس المرسوم بالنسبة إلى الزاوية اليسرى العلوية من القماش؟

Question

لدي قماش مربع بعرض 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 للنقطة الأولى والأخيرة من الخط المرسوم بالنسبة إلى الزاوية اليسرى العلوية من القماش؟

Answer 1

نقطة الانطلاق بشكل تافه (x + radius, y). نقطة النهاية هي ، عن طريق المثلثات البسيطة ، (x + radius*cos(angle), y + radius*sin(angle)). لاحظ أن نقطة البداية في هذه الحالة هي حالة خاصة لنقطة النهاية الأكثر عمومية ، مع angle يساوي الصفر. يجب أيضًا تقريب هذه القيم إلى أقرب عدد صحيح ، لأسباب واضحة.

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