دعنا نستمر في الحديث عن طريقة رسم منحنيات في قماش. اليوم سأتحدث عن QuadraticCurveto.
لكي نكون صادقين ، هذه الطريقة مخيفة بعض الشيء ، يمكنك أولاً تجربتها من اسم الوظيفة. بالمناسبة ، أعتقد أنه من الضروري تقصير اسم الوظيفة هذا.
التربيعي يعني التربيعي ، أي المعادلة التربيعية التربيعية في الرياضيات. معلمات CTX.QuadraticCurveto هي كما يلي:
ctx.quadraticCurveto (x1 ، y1 ، x ، y) ؛
حيث X و Y هي إحداثيات نقطة النهاية ، و X1 و Y1 هي إحداثيات نقطة التحكم في المنحنى؟ ماذا؟ تسألني أين نقطة البداية؟ يتم تحديد نقطة البداية باستخدام Moveto قبل ذلك.
السبب وراء وضع إحداثيات نقطة التحكم مع الرقم التسلسلي 1 هو أن وظيفة منحنيات الرسم المذكورة لاحقًا لها نقطتان تحكمان ، وهما X2 و Y2 ، لذلك سأقدم تطعيمًا هنا أولاً.
يمكن توصيل نقطة البداية التي تحددها Moveto ونقطة النهاية التي تحددها QuadraticCurveto نفسها بخط مستقيم. نظرًا لأن QuadraticCurveto لديها نقطة تحكم واحدة فقط ، فإن نقطة التحكم هذه إما على الجانب الأيسر من الخط أو على الجانب الأيمن من الخط ، لذلك لا يمكن أن يرسم QuadraticCurveto سوى الأقواس ، ولكن لا يزال لا يمكن رسم خط على شكل S.
من أجل الفهم السهل ، سأستمر في استخدام طريقة رسم الخطوط الإضافية في المقالة السابقة. الرمز الأولي كما يلي:
var x1 = 350 ،
Y1 = 250 ،
x = 400 ،
y = 500 ؛
ctx.beginpath () ؛
ctx.strokestyle = "#000" ؛
CTX.Moveto (300300) ؛ // نقطة البدء
ctx.quadraticCurveto (x1 ، y1 ، x ، y) ؛ // منحنى حقيقي
ctx.stroke () ؛
ctx.beginpath () ؛
CTX.Strokestyle = "RGBA (255،0،0،5)" ؛
CTX.Moveto (300300) ؛
ctx.lineto (x1 ، y1) ؛ // هذا السطر والخط التالي هما الخطوط التي ترسم نقطة التحكم
ctx.lineto (x ، y) ؛
ctx.moveto (300،300) ؛ // نقاط البداية والنهاية من نقاط البداية والنهاية
ctx.lineto (x ، y) ؛
ctx.stroke () ؛
لقد رسمت هنا خطين إضافيين ، أحدهما هو خط الاتصال بين نقطة البداية ونقطة النهاية ، والآخر هو الخط الإضافي بين نقطة البداية ونقطة التحكم ثم إلى نقطة النهاية (في الواقع). تقاطع هذين الخطين هو إحداثيات نقطة التحكم في QuadraticCurveto.
لا يمكن لـ QuadraticCurveto رسم منحنيات إلا في أقواس ، ولكن يمكن أن يكون هذا القوس غير منتظم للغاية ، وهو أيضًا تحسن مقارنة بـ ARC و Arcto.
بالإضافة إلى ذلك ، لن يكون لـ QuadraticCurveto انعكاس مثل Arcto.
بالطبع ، إذا قمت بسحب نقطة التحكم بعيدًا جدًا ، فقد تصبح الرسومات غير معروفة لك. لنجربها:
Y1 = 950 ؛
لقد قمت بتغيير Y1 قليلاً أكبر قليلاً ، وذهب المنحنى إلى أبعد من نطاق القماش.
ومع ذلك ، فإن نطاق المنحنيات المرسومة بواسطة QuadraticCurveto لا يمكن أن يصل أو يتجاوز إحداثيات نقطة التحكم. نحتاج فقط إلى التحكم في نقطة التحكم بشكل جيد ، لذلك لا داعي للقلق.
كتبت صفحة مثال متحرك بسيطة توضح عملية الرسم في QuadraticCurveto ، على أمل مساعدتك في تعميق فهمك:
يرجى أن تكون أكثر شمولاً إذا كان الكود مكتوبًا قبيحًا.