طريقة لتركيب المقاطع المتعددة الخطوط بسلاسة باستخدام منحنيات Bezier المبنية على القماش

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

دعونا نلقي نظرة أولاً على تأثير العرض للمخطط الخطي ضمن Echarts:

في البداية، لم ألاحظ أن هذا الجزء متعدد الخطوط كان في الواقع منحنى يمر عبره، اعتقدت أنه كان رسمًا نقطيًا بسيطًا، لذا فإن النسخة البسيطة (القبيح) والسهلة (القبيحة) التي قمت بتنفيذها في البداية كانت كما يلي:

لا تهتم بالأسلوب، النقطة الأساسية هي أنه بعد التنفيذ، اكتشفت أن تنفيذ Echarts يبدو سلسًا للغاية، مما أثار أيضًا مناقشات لاحقة. كيفية رسم منحنيات ناعمة بانتظام؟

الاداءات

دعونا نلقي نظرة أولاً على تنفيذ التقليد النهائي:

لأنني لا أعرف كيف يتم تنفيذ Echarts داخليًا (escape

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

نعم! والنتيجة واضحة الآن دعونا نلقي نظرة على التنفيذ لدينا.

عملية التنفيذ

1. ارسم مخططًا خطيًا
2. منحنى بيزييه مناسب بشكل سلس

بيانات محاكاة

 var data = [Math.random() * 300]; for (var i = 1; i < 50; i++) { // اتبع الرسوم البيانية data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])) } option = { Canvas:{ id: 'canvas' }، السلسلة: { name: 'datasimulated'، itemStyle: { color: 'rgb(255, 70, 131)' }, AreaStyle: { اللون: 'rgb(255, 158, 68)' }, البيانات: البيانات } };

ارسم مخططًا خطيًا

قم أولاً بتهيئة المُنشئ لوضع البيانات التي تحتاجها:

 وظيفة LinearGradient(option) { this.canvas = document.getElementById(option.canvas.id) this.ctx = this.canvas.getContext('2d') this.width = this.canvas.width this.height = this.canvas .height this.tooltip = option.tooltip this.title = option.text this.series = option.series //بيانات محاكاة التخزين}

رسم مخطط خطي:

 LinearGradient.prototype.draw1 = function() { // خط مرجعي متعدد الخطوط... // يجب اعتبار أن أصل اللوحة القماشية هو الزاوية اليسرى العليا، // لذا يجب إجراء بعض التحويلات أدناه، // diff هو x، المحور y هو البيانات الأجزاء المتساوية من نطاق القيم القصوى والدنيا. this.series.data.forEach(function(item, Index) { var x = diffX * Index, y = Math.floor(self.height - diffY * (item - dataMin)) self.ctx.lineTo(x, y) // ارسم نقاط البيانات الفردية}) ...}

النقطة الأساسية في منحنى Bezier هي اختيار نقاط التحكم. يمكن لهذا الموقع عرض منحنيات مختلفة مرسومة بنقاط تحكم مختلفة ديناميكيًا. ولحساب نقاط المراقبة. . لا يزال المؤلف يختار بايدو، لأنه ليس جيدًا في الرياضيات :). يمكن للطلاب المهتمين بالخوارزمية المحددة معرفة المزيد عنها الآن فلنتحدث عن نتيجة حساب نقاط التحكم.

تتضمن الصيغة أعلاه أربع نقاط إحداثية، النقطة الحالية والنقطة السابقة والنقطتان التاليتان. عندما تكون قيم الإحداثيات كما هو موضح في الشكل أدناه، يكون المنحنى المرسوم كما يلي:

ومع ذلك، هناك مشكلة تتمثل في أنه لا يمكن استخدام هذه الصيغة لنقطة البداية والنقطة الأخيرة، ولكن هذه المقالة توفر أيضًا طريقة لمعالجة القيم الحدودية:

لذلك عند تغيير الخط المتعدد إلى منحنى سلس، احسب القيم الحدودية ونقاط التحكم الأخرى واستبدلها في دالة Bessel:

 // التنفيذ الأساسي this.series.data.forEach(function(item, Index) { // ابحث عن نقطة التحكم بين النقطة السابقة والنقطة التالية varscale = 0.1 // للحصول على رقم موجب لنقطة التحكم ab، يمكنك ضبط var last1X = diffX * (index - 1), last1Y = Math.floor(self.height - diffY * (self.series.data[index - 1] - dataMin)), // إحداثيات النقطة السابقة last2X = diffX * (index - 2)، last2Y = Math.floor(self.height - diffY * (self.series.data[index - 2] - dataMin)))، // إحداثيات النقطتين الأوليين nowX = diffX * (index) ، nowY = Math.floor(self.height - diffY * (self.series.data[index] - dataMin)))، // إحداثيات النقطة الحالية nextX = diffX * (index + 1)، nextY = Math.floor(self.height - diffY * (self.series.data[index + 1] - dataMin)))، // تنسيق النقطة التالية cAx = last1X + (nowX - last2X) * المقياس، cAy = last1Y + (nowY - last2Y) * المقياس، cBx = nowX - (nextX - last1X) * المقياس، cBy = nowY - (nextY - last1Y) * المقياس إذا (الفهرس === 0) { self.ctx.lineTo(nowX, nowY) return } else if(index ===1) { cAx = last1X + (nowX - 0) * مقياس cAy = last1Y + (nowY - self.height) * مقياس } else if (الفهرس === self.series.data.length - 1) { cBx = nowX - (nowX - last1X) * مقياس cBy = nowY - (nowY - last1Y) * مقياس } self.ctx.bezierCurveTo(cAx, cAy, cBx, cBy, nowX, nowY) // ارسم منحنى Bezier من النقطة السابقة إلى النقطة الحالية})

نظرًا لأن النقطة التي أجتازها في كل مرة هي النقطة الحالية، لكن الصيغة الواردة في المقالة هي خوارزمية نقطة تحكم تحسب النقطة التالية، لذلك في تنفيذ التعليمات البرمجية، قمت بنقل حساب جميع النقاط مكانًا واحدًا للأمام. عندما يكون المؤشر = 0، وهو النقطة الأولية، لا يلزم رسم منحنى، لأننا نرسم منحنى من النقطة السابقة إلى النقطة الحالية، ولا يوجد منحنى إلى 0 يجب رسمه. بدءًا من المؤشر = 1، يمكننا البدء برسم المنحنى بشكل طبيعي من 0 إلى 1، لأنه لا توجد نقطة ثانية أمامه عندما يكون المؤشر = 1، فهي نقطة قيمة حدية، وتتطلب حسابًا خاصًا، وأخيراً نقطة. . بالنسبة للباقي، ما عليك سوى حساب إحداثيات xy لـ AB وفقًا للصيغة العادية واستبدالها في دالة Bessel.

انظر كود المصدر هنا

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