تنفيذ مكون الوابل بناءً على Canvas+Vue

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

• دعم حلقة الوابل
• الوابل لا يتداخل
• يدعم تحديد عدد المسارات
• دعم إرسال الوابل

يستخدم

npm i vue-barrage

تكوين المعلمة

أسلوب أتش تي أم أل

 <template> <div class=barrage-container> <div class=container :style={height: barrageHeight/2+'px'}> <canvas id=canvas ref=canvas :width=barrageWidth :height=barrageHeight :style= {'العرض': barrageWidth/2 + 'px'،'height': الحاجزHeight/2 + 'px'}/> </div> </div></template>

استمع إلى مصادر البيانات

 watch: { barrageList (val) { if (val.length !== 0) { this.initData() // تهيئة البيانات this.render() // بدء العرض} }}

تهيئة البيانات

يتم استخدام barrageArray لتخزين بيانات الوابل، بما في ذلك قائمة الوابل الافتراضية وعناصر الوابل الجديدة.

 /** * تهيئة البيانات*/initData () { for (let i = 0; i < this.barrageList.length; i++) { // يتم عرض 40 حرفًا فقط هنا Let content = this.barrageList[i]. الطول > 40 `${this.barrageList[i].content.substring(0, 40)}...` : this.barrageList[i].content this.pushMessage(content, this.barrageList[i].color) }},/** * إضافة بيانات* @param content * @param color */pushMessage (content, color) { Let Position = this.getPosition() / / تحديد موضع المدرج Let x = this.barrageWidth // الموضع الأولي Let offsetWidth = 0 for (let i = 0, len = this.barrageArray.length; i < len; i++) { Let item = this.barrageArray[i] if (position === item.position) { // إذا كانوا على نفس المسار، فانتقل إلى الخلف offsetWidth += Math.floor(this.ctx.measureText( item.content) .width * 3 + 60) } } this.barrageArray.push({ content: content, // محتوى الوابل x: x + offsetWidth, // تحديد الموضع الأولي لكل تعليق OriginX: x + offsetWidth، // قم بتخزين الموضع الحالي للتعليق بحيث يمكن استخدامه أثناء موضع التكرار: الموضع، العرض: this.ctx.measureText(content).width * 3, / / لون عرض محتوى رسم القماش: اللون ||.this.getColor() // لون مخصص})},

ما يجب معالجته في بيانات التهيئة هو حساب مسار الوابل الحالي وموضعه وعرضه بحيث يمكن استخدامه عند رسم canvas .

رسم canvas

 /** * Render*/render () { this.ctx.clearRect(0, 0, this.barrageWidth, this.barrageHeight) this.ctx.font = '30px Microsoft YaHei' this.draw() window.requestAnimationFrame(this .render) // يتم العرض كل 16.6 مللي ثانية إذا كنت تستخدم setInterval، فسيكون ذلك بطيئًا بعض الشيء في النماذج المنخفضة},/** *. ابدأ في رسم النص والخلفية*/draw () { for (let i = 0, len = this.barrageArray.length; i < len; i++) { Let barrage = this.barrageArray[i] حاول { barrage.x -= هذا .speed if (barrage.x < -barrage.width - 100) { // تحديد الوقت الذي يختفي فيه الوابل هنا if (i === this.barrageArray.length - 1) { // منطق الحكم عند اختفاء الوابل الأخير if (!this.loop) { // إذا لم تكن حلقة، قم بإلغاء الرسم لتحديد ما إذا كانت حلقة، وقم بتنفيذ CancelAnimationFrame بدون حلقة CancelAnimationFrame(this.render) return } if (this.addArray .length !== 0) { // تحديد منطق إضافة وابل هنا this.barrageArray = this.barrageArray.concat(this.addArray) this.addArray = [] } for (let j = 0; j < this.barrageArray.length; j++) { // أعط كل وابل قيمة أولية x this.barrageArray[j].x = this.barrageArray[j].originX } } } if (barrage.x) <= 2 * document.body.clientWidth + barrage.width) { // حدد متى تبدأ الرسم إذا لم يكن الأمر كذلك، فسيتسبب في توقف وابل التمرير //. ارسم الخلفية this.drawRoundRect(this.ctx, barrage.x - 15, barrage.position - 30, barrage.width + 30, 40, 20, `rgba(0,0,0,0.75)`) // ارسم الخلفية أرسل هذا النص بـ .ctx.fillStyle = `${barrage.color}` this.ctx.fillText(barrage.content, barrage.x, barrage.position) } } Catch (e) { console.log(e) } }},

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

وظائف أخرى

 /** * احصل على موضع النص * استخدم pathWayIndex لتأكيد المسار حيث يقع كل وابل * إرجاع المسافة من الأعلى *TODO يمكن أيضًا تحسين هذا لتحديد موقع الوابل التالي بناءً على مسافة كل مسار */ getPosition () { Let range = this.channels Let top = (this.pathWayIndex % range) * 50 + 40 this.pathWayIndex++ return top},/** * احصل على لون عشوائي*/getColor () { return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);},/** * ارسم مستطيلًا مستدير الزوايا* @ سياق المعلمة * @param x * @param y * @param width * @param height * @param radius * @param color */drawRoundRect (context, x, y، العرض، الارتفاع، نصف القطر، اللون) { context.beginPath() context.fillStyle = color context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2) context.lineTo (العرض - نصف القطر + x، y) context.arc(العرض - نصف القطر + x، نصف القطر + y، نصف القطر، Math.PI * 3 / 2، Math.PI * 2) context.lineTo(width) + x، الارتفاع + y - نصف القطر) context.arc(العرض - نصف القطر + x، الارتفاع - نصف القطر + y، نصف القطر، 0، Math.PI / 2) context.lineTo(نصف القطر + x، الارتفاع + y) context.arc (نصف القطر + x، الارتفاع - نصف القطر + y، نصف القطر، Math.PI / 2، Math.PI) context.fill() context. ClosePath()}

هنا هي وظيفة خدمة الوابل

يستخدم

 <barrage ref=barrage class=barrage :barrage-list=barrageList :speed=speed :loop=loop :channels=channels/> استيراد وابل من 'vue-barrage'// تهيئة بيانات الوابل this.barrageList = [{ content: ' بيانات الاختبار رقم الاختبار رقم بيانات الاختبار بيانات الاختبار'، اللون: 'أبيض'}]// أضف وابلًا جديدًا this.$refs.barrage.add({ content: "أضف وابلًا جديدًا أضف وابلًا جديدًا"، اللون: "أبيض"})

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

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