تحدثت المقالة السابقة عن طريقة قوس القماش ، وتحدثت هذه المقالة عن طريقة Arcto المتعلقة بها.
يمكن رؤية Arc و Arcto من أسماءهم. Arcto هو أيضًا طريقة لرسم منحنيات ، والمنحنى الذي يرسمه هو أيضًا قوس من دائرة مثالية. لكن معاييره وقوسها ببساطة غير ذات صلة ~
ctx.arcto (x1 ، y1 ، x2 ، y2 ، radius) ؛ تتضمن معلمات Arcto نقطتين ، وليس هناك فائدة تمثل مركز الدائرة في هاتين النقطتين. المعلمة الأخيرة فقط هي نصف قطر الدائرة ، مما يشير إلى أن Arcto والدائرة لها علاقة صغيرة.
هناك عدد قليل جدًا من المقالات حول Arcto Online ، وقد وجدت أخيرًا مقالات أجنبية ؛ وليس هناك أداة بديهية لرسم قماش ، لذلك لا يمكنني إلا أن أخمن ، جعلني Arcto يخمن لفترة طويلة. .
للحصول على وصف بديهي ، أخذت طريقة مساعدة: أينما تم رسم Arcto ، استخدمت LineTo لرسم النقاط المقابلة لرؤية علاقتها. مجرد رسم خطوط مساعدة.
var x0 = 100 ،
y0 = 400 ،
x1 = 500 ،
Y1 = 400 ،
x2 = 450 ،
Y2 = 450 ؛
ctx.beginpath () ؛
ctx.moveto (x0 ، y0) ؛
ctx.strokestyle = "#f00" ؛
ctx.linewidth = 2 ؛
ctx.arcto (x1 ، y1 ، x2 ، y2،20) ؛
ctx.stroke () ؛
ctx.beginpath () ؛
CTX.Strokestyle = "RGBA (0،0،0،0.5)" ؛
ctx.linewidth = 1 ؛
ctx.moveto (x0 ، y0) ؛
ctx.lineto (x1 ، y1) ؛
ctx.filltext ('x1 ، y1' ، x1+10 ، y1+10)
CTX.Lineto (x2 ، y2) ؛
ctx.filltext ('x2 ، y2' ، x2+10 ، y2)
ctx.stroke () ؛
يبدو أن هناك الكثير من التعليمات البرمجية ، لكنها في الواقع بسيطة للغاية. لقد استخدمت عدة متغيرات لحفظ قيم الإحداثيات ، والباقي من عمليات القماش.
الوصف المتغير: X0 ، Y0 هو إحداثيات نقطة البداية ، X1 ، Y1 هو إحداثيات النقطة الأولى ، و X2 ، Y2 هي إحداثي النقطة الثانية. الخط المستقيم الذي يرسمه Lineto هو خط أسود 1 بكسل شفاف ، والخط المرسوم بواسطة Arcto هو خط أحمر 2 بكسل.
قم بتحديث الصفحة وسترى الصورة أدناه.
يجب أن أقول أن هذا الخط الأحمر يشبه الخطاف.
لذلك تم العثور على قانون Arcto. لقد شكلت في الواقع زاوية من خلال الخطين المستقيمين عند نقطة البداية ، النقطة 1 والنقطة 2 ، وهذان الخطان هما أيضًا خطوط الظل في دائرة المعلمة.
يحدد نصف قطر الدائرة المكان الذي ستشق فيه الدائرة الحواف مع الخط. إنها مثل الكرة التي تتدحرج في زاوية ميتة. كلما كانت الكرة أصغر ، كلما كانت تدحرج ، كلما وصلت إلى الزاوية الميتة ؛ أكبر الكرة ، العكس صحيح.
هذه قضية أكاديمية خطيرة للغاية ، لذلك لا تريد YY.
لنجعل الكرة أكبر!
ctx.arcto (x1 ، y1 ، x2 ، y2،50) ؛ // تم تغيير نصف القطر إلى 50
كما هو موضح في الشكل ، يمكنك أن ترى أن القوس أصبح كبيرًا ولا حتى الظل في الخط المستقيم.
بالطبع ، لا يزالون في الواقع الظل لأن الظل تم تمديده بلا حدود.
نستمر في استكشاف ، والاستمرار في تنمية الدائرة ، ونقل المسافة بين نقطة البداية والنقطة الأولى.
var x0 = 400 ؛ // تتغير إحداثيات نقطة البداية X من 100 إلى 400
...
ctx.arcto (x1 ، y1 ، x2 ، y2،100) ؛ // يصبح نصف قطر الدائرة أكبر إلى 100 وسترى مثل هذا الرقم الغريب.
لقد كان في الأصل خطافًا ، ولكن الآن تم عازمه وتحولت إلى الاتجاه المعاكس! إنه مثل حامل زجاجة النبيذ.
ومع ذلك ، يرجى ملاحظة أن هذه الدائرة لا تزال مماس للخطرين! ولكن الآن لا يمكن لطول الخطين إرضاء هذه الدائرة! لقد مدد كلا الأسلاك لاسلكيًا!
متى سيتم عكس مقبض الخطاف هذا؟ إذا كان لديك هندسة جيدة ، فيمكنك محاولة فهم معادلات الظل للنقاط والدوائر.
هناك نقطة مهمة للغاية في طريقة Arcto. هذه النقطة المهمة هي (x1 ، y1) في الكود. طالما أن المسافة منه إلى نقطة الظل للدائرة تتجاوز المسافة من ذلك إلى نقطة البداية (x0 ، y0) ، فسوف ينعكس.
من الشكل ، يمكننا أن نرى أن إحداثيات هذه النقطة (x2 ، y2) يمكن أن تتغير بلا حدود. طالما أنها دائما نقطة على الظل ، فإن الرسم البياني الذي رسمه Arcto لن يتغير على الإطلاق عندما يظل نصف قطر الدائرة دون تغيير. هذا يتطلب اهتماما خاصا.
اسمحوا لي أن أستخدم معرفتي الهندسية التي لا يمكنني الحصول عليها على الطاولة للتحقق من هذا الاقتراح. من أجل الحساب ، قمت أولاً بتغيير الزاوية بين الخطين إلى 90 درجة.
var x0 = 100 ،
y0 = 400 ،
x1 = 500 ،
Y1 = 400 ،
x2 = 500 ،
Y2 = 450 ؛
بعد التغيير ، سيتم فتحه 90 درجة! نحافظ على نصف قطر الكرة دون تغيير. بعد التحديث:
نجعل Y2 أكبر ، أي ، تمديد خط الظل ، تحويله إلى 550 ، والتحديث:
تم تمديد خط الظل ، لكن الخط الأحمر الذي رسمه Arcto لم يتغير على الإطلاق.