Wie kann VueJS + Canvas-Context miteinander verknüpft werden?

Question

Ich benutze VueJS und ich möchte die HTML-Canvas mit der Canvas-Context integrieren. Ich mag die context von innen heraus nennen meine components wie:

mounted() { 
    this.$c.moveTo(100, 100) 
    this.$c.lineTo(200, 200) 
} 

begann ich in meinem main.js mit:

Vue.prototype.$c = document.querySelector('canvas').getContext('2d') 

Außerdem, ich weiß auch nicht, wie man mit dem Schlüsselwort arbeitet this wie in einem Konstrukt:

const Something = (x, y) => { 
    this.x = x 
    this.y = y 
    this.draw() { 
    this.$c.moveTo(100, 100) 
    this.$c.lineTo(200, 200) 
    } 
} 

So wie kann ich kombinieren die canvas-context und VueJS?

Answer 1

Sie können die Prototypeigenschaft genau so einstellen, wie Sie es tun, bevor Sie die Vue-Instanzen erstellen (wie in Adding Instance Properties beschrieben).

Wie in this answer beschrieben, sind Pfeilfunktionen nicht an this gebunden, also stellen Sie sicher, dass Sie Nicht-Pfeil-Funktionen verwenden.

Verwenden Sie nicht arrow functions für eine Instanzeigenschaft oder einen Rückruf (z. B.). Da Pfeilfunktionen an den übergeordneten Kontext gebunden sind, ist this nicht die Vue-Instanz, wie Sie es erwarten würden, und this.myMethod wird 10 sein. ¹

ein Beispiel hierfür im Snippet Siehe unten. Klicken Sie auf die Schaltfläche Zeichnen Sie die Schaltfläche, um eine Linie auf der Leinwand zu zeichnen.

//wait for DOM to load 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    //set property on all Vue instances 
 
    Vue.prototype.$c = document.getElementById('myCanvas').getContext('2d'); 
 
    //create Vue instance 
 
    var vm = new Vue({ 
 
    el: '#example', 
 
    methods: { 
 
     draw: function() { 
 
     this.$c.beginPath(); 
 
     this.$c.moveTo(100, 100); 
 
     this.$c.lineTo(200, 200); 
 
     this.$c.stroke(); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 
<canvas id="myCanvas"></canvas> 
 
<div id="example"> 
 
    <button @click="draw">draw</button> 
 
</div>

---

_{https://vuejs.org/v2/guide/instance.html#Properties-and-Methods}