Comment CommentJS + Canvas-Context peut-il être lié?

Question

J'utilise VueJS et je veux incorporer le HTML-Canvas avec le Canvas-Context. Je voudrais appeler l'context à partir de mon components comme:

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

j'ai commencé dans mon main.js avec:

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

De plus, je ne sais pas comment travailler aussi avec le mot-clé this dans une construction comme:

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

Alors, comment puis-je combiner les canvas-context et VueJS?

Answer 1

Vous pouvez définir la propriété prototype, comme vous le faites, avant de créer les instances de Vue (comme décrit dans Adding Instance Properties).

Comme décrit dans this answer, les fonctions de flèche ne se lient pas à this, assurez-vous donc d'utiliser des fonctions autres que des flèches.

Ne pas utiliser arrow functions sur une propriété d'instance ou de rappel (par exemple vm.$watch('a', newVal => this.myMethod())). Comme les fonctions de flèches sont liées au contexte parent, this ne sera pas l'instance de Vue comme vous l'attendez et this.myMethod sera undefined. ¹

Voir un exemple dans l'extrait ci-dessous. Cliquez sur le bouton dessiner pour dessiner une ligne sur le canevas.

//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}