التعليقات: ARC ، Arcto و QuadraticCurveto. لديهم جميعًا شيء واحد مشترك ، أي أن المنحنيات التي يرسمونها لا يمكن أن تكون متحيزة إلا إلى جانب واحد. الفرق الأكبر بين Beziercurveto المذكورة اليوم وهي نقطتان تحكمان ، أي أن المنحنى على شكل S يمكن رسمه. يمكن للأصدقاء المهتمين التعرف على ذلك.
في المقالة السابقة ، تحدثت عن ثلاث طرق لرسم منحنيات في قماش: Arc و Arcto و QuadraticCurveto. لديهم جميعًا شيء واحد مشترك ، أي أن المنحنيات التي يرسمونها لا يمكن أن تكون متحيزة إلا إلى جانب واحد. الفرق الأكبر بين Beziercurveto المذكورة اليوم وهم لديهم نقطتان تحكمان ، أي أنه يمكنهم رسم منحنى على شكل S.Beziercurveto ، وهو ما يسمى منحنى Bezier ، إذا كنت قد تعلمت بعض أدوات الرسم ، يمكنك فهمها على الفور.
بناء جملة Beziercurveto كما يلي:
ctx.beziercurveto (x1 ، y1 ، x2 ، y2 ، x ، y) ؛ سأشرح معاييره كالمعتاد. (x1 ، y1) هو إحداثيات نقطة التحكم 1 ، (x2 ، y2) هو إحداثيات نقطة التحكم 2 ، و (x ، y) هي إحداثيات نقطة النهاية الخاصة بها. مثل QuadraticCurveto ، فإن إحداثيات نقطة البداية الخاصة بها هي أيضًا محددة مسبقًا بواسطة Moveto.
لذلك ، يتطلب Beziercurveto Draw منحنى 4 نقاط: نقطة البداية ، نقطة النهاية ، نقطة التحكم 1 ، نقطة التحكم 2. من أجل التفسير اللاحق ، هنا أفترض أن نقطة التحكم 1 تتوافق مع نقطة البداية ونقطة التحكم 2
سنذكر هنا المشكلة القديمة لرسم قماش ، مما يعني أن رسم الرمز يعتمد كل شيء على التخمين ، وتحتاج إلى تحديث الرسم لفهم المكان الذي ترسمه.
سأستمر في التقاليد الجميلة السابقة وأرسم بعض الخطوط الإضافية لمساعدة الجميع على فهم:
var x1 = 450 ، // إحداثي X لنقطة التحكم 1
Y1 = 300 ، // Y من نقطة التحكم 1
x2 = 450 ، // x من نقطة التحكم 2
Y2 = 500 ، // Y من نقطة التحكم 2
x = 300 ، // end point x
y = 500 ؛ // end point y
CTX.Moveto (300،300) ؛ // نقطة البدء
ctx.beginpath () ؛
ctx.linewidth = 5 ؛
CTX.Strokestyle = "RGBA (0،0،0،1)"
CTX.Moveto (300300) ؛
ctx.beziercurveto (x1 ، y1 ، x2 ، y2 ، x ، y) ؛
ctx.stroke () ؛
// ابدأ في رسم خطوط المساعدة
ctx.beginpath () ؛
CTX.Strokestyle = "RGBA (255،0،0،5)" ؛
ctx.linewidth = 1 ؛
// قم بتوصيل نقطة البداية ونقطة التحكم 1
CTX.Moveto (300300) ؛
ctx.lineto (x1 ، y1) ؛
// توصيل نقطة النهاية ونقطة التحكم 2
ctx.moveto (x2 ، y2) ؛
ctx.lineto (x ، y) ؛
// قم بتوصيل نقاط البداية والنهاية (خط الأساس)
CTX.Moveto (300300) ؛
ctx.lineto (x ، y) ؛
ctx.stroke () ؛
هنا أرسم أولاً منحنىًا مشابهًا لـ QuadraticCurveto ، وهو متحيز فقط إلى جانب واحد. يبدو أن هذا الخط مستدير نسبيًا لأن إحداثيات X لنقاط التحكم 1 و 2 هي نفسها.
ارسم الآن منحنىًا على شكل S لإثبات أن Beziercurveto فريد من نوعه:
var x1 = 150 ؛
...
في الواقع ، فقط قم بتغيير إحداثيات نقطة التحكم 1. إذا كانت إحداثيات نقطة التحكم 1 ونقطة التحكم 2 على التوالي على جانبي خط الأساس ، يتم رسم منحنى على شكل S ؛ إذا كان كلاهما على جانب واحد من خط الأساس ، فهو تأثير مشابه لـ QuadraticCurveto.
وضع هذا المثال بسيط نسبيا. يعد خط الأساس (نقطة البداية إلى نقطة النهاية) رأسيًا ، ولكن معظم الوقت في التطبيق الفعلي ، يكون خطنا الأساسي مائلًا ، وبالتالي فإن الموقف أكثر تعقيدًا. ولكن دعنا نجربها بنفسك
تبدو كل طريقة رسم واحدة نسبيًا في الوظيفة ، ولكن يتم دمج الطريقة القوية بطريقة واحدة. في المقالة اللاحقة ، حاولت شرح بعض طرق الرسم الشائعة ، مثل المستطيلات المدورة واللوائح. كانوا بحاجة إلى الجمع بين هذه الأساليب المفردة في الماضي.