Implementierung der Sperrkomponente basierend auf Canvas+Vue

Da das Projekt kürzlich eine Sperrfunktion anpassen musste, habe ich versucht, Canvas zum Entwickeln von Komponenten zu verwenden. Nach dem Testen auf einigen Low-End-Geräten gibt es keine offensichtliche Verzögerung. Lassen Sie mich dies mit Ihnen teilen.

• Unterstützungsschleifensperrfeuer
• Sperrfeuer überschneidet sich nicht
• Unterstützt die Auswahl der Anzahl der Titel
• Unterstützen Sie das Senden von Sperrfeuern

verwenden

npm i vue-barrage

Parameterkonfiguration

HTML-Stil

 <template> <div class=barrage-container> <div class=container :style={height: barrageHeight/2+'px'}> <canvas id=canvas ref=canvas :width=barrageWidth :height=barrageHeight :style= {'width': barrageWidth/2 + 'px','height': barrierHeight/2 + 'px'}/> </div> </div></template>

Hören Sie sich Datenquellen an

 watch: { barrageList (val) { if (val.length !== 0) { this.initData() // Dateninitialisierung this.render() // Rendering starten} }}

Dateninitialisierung

barrageArray wird zum Speichern von Sperrdaten verwendet, einschließlich der Standard-Sperrliste und neuer Sperrelemente.

 /** * Dateninitialisierung*/initData () { for (let i = 0; i < this.barrageList.length; i++) { // Hier werden nur 40 Zeichen angezeigt let content = this.barrageList[i]. Länge > 40 ? `${this.barrageList[i].content.substring(0, 40)}...` : this.barrageList[i].content this.pushMessage(content, this.barrageList[i].color) }},/** * Daten hinzufügen* @param content * @param color */pushMessage (content, color) { let position = this.getPosition() / / Bestimmen Sie die Landebahnposition let x = this.barrageWidth // Anfangsposition let offsetWidth = 0 for (let i = 0, len = this.barrageArray.length; i < len; i++) { let item = this.barrageArray[i] if (position === item.position) { // Wenn sie auf derselben Spur sind, nach hinten verschieben offsetWidth += Math.floor(this.ctx.measureText( item.content) .width * 3 + 60) } } this.barrageArray.push({ content: content, // Sperrinhalt x: x + offsetWidth, // Bestimmen Sie die Anfangsposition jedes Kommentars originX: x + offsetWidth, // Speichern Sie die aktuelle Position des Kommentars, damit er während der Schleife verwendet werden kann position: position, width: this.ctx.measureText(content).width * 3, / / Breite des Leinwandzeichnungsinhalts: Farbe ||. this.getColor() // Benutzerdefinierte Farbe})},

Was in den Initialisierungsdaten verarbeitet werden muss, ist die Berechnung der Spur, Position und Breite des aktuellen Sperrfeuers, damit es beim Zeichnen canvas verwendet werden kann.

canvas zeichnen

 /** * Render*/render () { this.ctx.clearRect(0, 0, this.barrageWidth, this.barrageHeight) this.ctx.font = '30px Microsoft YaHei' this.draw() window.requestAnimationFrame(this .render) // Alle 16,6 Millisekunden rendern Wenn Sie setInterval verwenden, wird es bei Low-End-Modellen etwas verzögert},/** *. Beginnen Sie mit dem Zeichnen von Text und Hintergrund*/draw () { for (let i = 0, len = this.barrageArray.length; i < len; i++) { let barrage = this.barrageArray[i] try { barrage.x -= this .speed if (barrage.x < -barrage.width - 100) { // Bestimmen Sie hier den Zeitpunkt, zu dem das Sperrfeuer verschwindet if (i === this.barrageArray.length - 1) { // Beurteilungslogik, wenn das letzte Sperrfeuer verschwindet if (!this.loop) { // Wenn es sich nicht um eine Schleife handelt, brechen Sie die Zeichnung ab, um festzustellen, ob es sich um eine Schleife handelt, und führen Sie cancelAnimationFrame ohne Schleife aus. cancelAnimationFrame(this.render) return } if (this.addArray .length !== 0) { // Bestimmen Sie die Logik des Hinzufügens von Barrage hier this.barrageArray = this.barrageArray.concat(this.addArray) this.addArray = [] } for (let j = 0; j < this.barrageArray.length; j++) { // Geben Sie jedem Barrage einen Anfangswert von x this.barrageArray[j].x = this.barrageArray[j].originX } } } if (barrage. x <= 2 * document.body.clientWidth + barrage.width) { // Bestimmen Sie, wann mit dem Zeichnen begonnen werden soll. Wenn nicht, bleibt der Barrage-Scroll hängen. // Zeichne den Hintergrund this.drawRoundRect(this.ctx, barrage.x - 15, barrage.position - 30, barrage.width + 30, 40, 20, `rgba(0,0,0,0.75)`) // Zeichne den Text this .ctx.fillStyle = `${barrage.color}` this.ctx.fillText(barrage.content, barrage.x, barrage.position) } } Catch (e) { console.log(e) } }},

Hier wird die Zeichenlogik beurteilt, einschließlich des Zeitpunkts des Abbruchs, der Beurteilung, wann das Sperrfeuer mit dem Zeichnen beginnt und der Beurteilung, wann das Sperrfeuer verschwindet.

Andere Funktionen

 /** * Textposition abrufen * PathWayIndex verwenden, um die Spur zu bestätigen, auf der sich jede Sperre befindet * Entfernung von oben zurückgeben * @TODO Dies kann auch optimiert werden, um die Position der nächsten Sperre basierend auf der Entfernung jeder Spur zu bestimmen */ getPosition () { let range = this.channels let top = (this.pathWayIndex % range) * 50 + 40 this.pathWayIndex++ return top},/** * Eine zufällige Farbe erhalten*/getColor () { return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);},/** * Zeichne ein abgerundetes Rechteck* @ param context * @param x * @param y * @param width * @param height * @param radius * @param color */drawRoundRect (context, x, y, Breite, Höhe, Radius, Farbe) { context.beginPath() context.fillStyle = Farbe context.arc(x + Radius, y + Radius, Radius, Math.PI, Math.PI * 3 / 2) context.lineTo (Breite – Radius + x, y) context.arc(Breite – Radius + x, Radius + y, Radius, Math.PI * 3 / 2, Math.PI * 2) context.lineTo(width + x, Höhe + y - Radius) context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI / 2) context.lineTo(radius + x, height + y) context.arc (Radius + x, Höhe - Radius + y, Radius, Math.PI / 2, Math.PI) context.fill() context.closePath()}

Hier ist die Sperrdienstfunktion

verwenden

 <barrage ref=barrage class=barrage :barrage-list=barrageList :speed=speed :loop=loop :channels=channels/> import Barrage from 'vue-barrage'// Barrage data initialization this.barrageList = [{ content: ' Testdaten Testnummer Testdatennummer Testdaten', Farbe: 'weiß'}]// Neues Barrage hinzufügen this.$refs.barrage.add({ content: 'Neues Sperrfeuer hinzufügenNeues Sperrfeuer hinzufügen', Farbe: 'weiß'})

Insgesamt gibt es bei dieser Komponente noch Optimierungspotenzial und ich werde sie auch in Zukunft weiter verbessern.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.