يطبق Canvas منحنى Bezier عالي الترتيب (مولد منحنى Bezier ذو الترتيب N)

نظرًا لأن Canvas الأصلي يدعم فقط ما يصل إلى منحنيات Bezier من الدرجة الثالثة، فماذا علي أن أفعل إذا كنت أرغب في إضافة نقاط تحكم متعددة؟ (حتى معظم المنحنيات المعقدة يمكن محاكاتها باستخدام بيزيير من الدرجة الثالثة.) وفي الوقت نفسه، من الصعب علينا أن نفهم بوضوح موضع نقاط التحكم في بيزيير بشكل حدسي للغاية نريد؟ من أجل حل نقطتي الألم المذكورتين أعلاه، يبدو أنه لا يوجد حل على المستوى N (إصدار js) في المجتمع، لذا فإن المؤلف هذه المرة جاد جدًا بشأن bezierMaker.js مفتوح المصدر!

يدعم bezierMaker.js نظريًا إنشاء منحنيات Bezier ذات الترتيب N، ويوفر أيضًا أرضية اختبار للمطورين لإضافة نقاط التحكم وسحبها لإنشاء مجموعة من الرسوم المتحركة للرسم. من السهل جدًا على المطورين معرفة منحنيات التوليد المختلفة المقابلة لنقاط التحكم في المواضع المختلفة.

إذا أعجبك هذا العمل، فمرحبًا بك في النجمة، ففي النهاية، النجوم تم الحصول عليها بشق الأنفس. .

عنوان المشروع: هنا✨✨✨

عند رسم منحنيات بيزيير المعقدة ذات الترتيب العالي، لا يمكنك معرفة الموقع الدقيق لنقاط التحكم في المنحنى الذي تحتاجه. عند المحاكاة في مجال الاختبار، يمكن الحصول على القيم الإحداثية لنقاط التحكم في الوقت الفعلي، ويمكن تحويل إحداثيات النقاط التي تم الحصول عليها إلى مصفوفة كائن وتمريرها إلى فئة BezierMaker لإنشاء المنحنى المستهدف.

الاداءات

1. [x] يمكن إضافة أي عدد من نقاط التحكم إلى موقع الاختبار
2. [x] يدعم موقع الاختبار الرسوم المتحركة لتشكيل رسم المنحنى.
3. [x] يمكن سحب نقاط التحكم بحرية
4. [x] يدعم عرض الخطوط المماسه أثناء تكوين منحنيات بيزييه
5. [x] يستخدم رسم منحنيات Bezier من الرتبة 3 وأدناه واجهة برمجة التطبيقات الأصلية

 <script src=./bezierMaker.js></script>

يوضح العرض أعلاه استخدام موقع الاختبار، وبعد الحصول على الإحداثيات الدقيقة لنقاط التحكم من خلال موقع الاختبار، يمكنك الاتصال بـ bezierMaker.js لرسم المنحنى مباشرة.

 /** * كائن DOM في لوحة القماش * مصفوفة نقاط التحكم bezierCtrlNodesArr، بما في ذلك إحداثيات x وy * لون منحنى اللون */var Canvas = document.getElementById('canvas')// استخدم الطريقة الأصلية للتنفيذ قبل المستوى 3 var arr0 = [ {x:70,y:25},{x:24,y:51}]var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]var arr2 = [{x:23,y:225},{x:70, ص:79}،{س:40،ص:51}،{س:300، ص:44}]فار arr3 = [{س:333،ص:15}،{س:70،ص:79}،{س:40،ص:551}،{س:170،ص:279}،{س:17،ص:239} ]فار arr4 = [{س:53،ص:85}،{س:170،ص:279}،{س:240،ص:551}،{س:70،ص:79}،{س:40،ص:551} ,{x:170,y:279}]var bezier0 = new BezierMaker(canvas, arr0, 'black')var bezier1 = new BezierMaker(canvas, arr1, 'red')var bezier2 = new BezierMaker(canvas, arr2, 'blue')var bezier3 = new BezierMaker(canvas, arr3, 'yellow')var bezier4 = new BezierMaker(canvas, arr4, 'أخضر')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()

ارسم النتائج

عندما يكون هناك أقل من 3 نقاط تحكم، سيتم استخدام واجهة API الأصلية. عندما يكون هناك أكثر من نقطتي تحكم، سيتم استخدام الوظيفة التي ننفذها لرسم النقاط.

رسم منحنى بيزيير

النقطة الأساسية في رسم منحنى بيزيير تكمن في تطبيق صيغة بيزيير:

يمثل P0-Pn في هذه الصيغة عمليات الطاقة المختلفة لكل نقطة والنسبة t من نقطة البداية إلى كل نقطة تحكم ثم إلى نقطة النهاية.

 BezierMaker.prototype.bezier = function(t) { // استدعاءات صيغة Bezier var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, // صفيف نقطة التحكم n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach (function(item, Index) { if(!index) { x += item.x * Math.pow(( 1 - t ), n - فهرس) * Math.pow(t, فهرس) y += item.y * Math.pow(( 1 - t ), n - فهرس) * Math.pow(t, Index) } else { // المعامل هو دالة المضروب x += self.factorial(n) / self.factorial(index) / self.factorial(n - Index) * item.x * Math الأسرى (( . 1 - t )، n - فهرس) * Math.pow(t, فهرس) y += self.factorial(n) / self.factorial(index) / self.factorial(n - فهرس) * item.y * Math. الأسرى(( 1 - t , n - فهرس) * Math.pow(t, فهرس) } }) return { x: x, y: y }}

اجتياز جميع النقاط وحساب إحداثيات النقطة الحالية x، y على منحنى Bezier بناءً على قيمة النسبة الحالية t (0<=t<=1). يقسم المؤلف قيمة t إلى 1000 جزء، أي t+=0.01 لكل عملية. إن x وy المحسوبين في هذا الوقت هما النقاط بعد تقسيم منحنى Bezier إلى 1000 جزء. عندما تعبر قيمة t من 0 إلى 1100 مرة، يتم إنشاء إحداثيات 1000 x وy المقابلة، ويمكن محاكاة منحنى Bezier عالي الترتيب عن طريق رسم النقاط والخطوط بالتسلسل.

وسيقوم المؤلف بشرح اشتقاق صيغة بيزير بشكل خاص في مقالة لاحقة. الآن كل ما عليك فعله هو معرفة أننا نستخدم صيغة بيزير لحساب أن منحنى بيزير الفعلي ينقسم إلى 1000 نقطة، ونربط النقاط بخطوط مستقيمة بعد ذلك يمكن محاكاة منحنى الطبقة.

تنفيذ الرسوم المتحركة الناتجة عن منحنى بيزيير في مجال المحاكاة

يمكن العثور على الكود ذي الصلة لهذا الجزء هنا

الفكرة العامة هي استخدام طريقة عودية لمعالجة كل طبقة من نقاط التحكم كدالة Bessel من الدرجة الأولى لحساب الطبقة التالية من نقاط التحكم وتوصيلها وفقًا لذلك. سيترك المؤلف المنطق المحدد حتى الشرح المتعمق لمبادئ صيغة منحنى بيزيير لفرز مبادئ إنشاء الرسوم المتحركة لموقع الاختبار ~

لقد أراد المؤلف دائمًا فتح شيء ما (ولكن لا يوجد شيء يمكنه الكتابة عنه، ومع ذلك، كل ما يتم استخدامه عادة قد كتبه آخرون، وإعادة اختراع العجلة لا يمكن أن يكتبها الآخرون بشكل جيد). هذه المرة، وجدت منطقة فارغة على ما يبدو. لذلك اتخذت قرارًا رسميًا للغاية بفتح المصدر. معظم تطبيقات Bezier المتقدمة في gayhub هي تطبيقات Android، ولا يزال هناك العديد من الأماكن في مجال الواجهة الأمامية التي يمكن توسيعها، ونرحب بالمناقشات ~ الكثير من الانتقادات!

عنوان المشروع: هنا✨✨

عنوان موقع الاختبار: تأكد من الدخول واللعب✨✨✨

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.