Dessiner sur une toile avec vue.js

Je ne pense pas que ce soit nécessairement une Vue question, mais je suis en cours d'exécution dans un certain ennui.

Je voudrais écrire sur la toile une Vue variable. Si je supprime vue, mon premier code fonctionne bien, mais si j'ajoute de Vue la toile n'a pas réellement démarrer.

Voici mon code

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "black";
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

var v = new Vue({
  el: '#app',
  data: {
    'exampleContent': 'This is TEXT'
  },
  watch: {
    exampleContent: function(val, oldVal) {
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.fillStyle = "black";
      ctx.font="20px Georgia";
      ctx.fillText(this.exampleContent,10,50);
    }
  }
});

Si j'en commentaire /* var v = new Vue({ ... l'initiale peu de travaux. Si je me connecte à la valeur de exampleContent dans l'observateur qui fonctionne également. Mais quelque chose sur la toile n'est pas de travail.

Démo pour jouer avec:
http://codepen.io/EightArmsHQ/pen/EgGbgR?editors=1010

source d'informationauteur Djave | 2016-10-21

  1. 14

    Veuillez cocher cette jsFiddle: https://jsfiddle.net/mani04/r4mbh6nu/

    EDIT: mis à jour avec le texte dynamique: https://jsfiddle.net/mani04/r4mbh6nu/1/

    Dans l'exemple ci-dessus, je suis en mesure d'écrire dans la toile, et de veiller à ce que les input texte va dans span que vous attendez, le tout en utilisant Vue.js

    De revenir à votre exemple, le code HTML est:

    <div id="app">
    <canvas id="canvas" width="800" height="600"></canvas>
    <input type="text" v-model="exampleContent" />
    <span>{{ exampleContent }}</span>
</div>

    Vue.js lit les éléments à l'intérieur de #app et les garde aussi le modèle de votre Vue app. Si votre canvasinput et span éléments vont maintenant être re-rendus par Vue.js lorsqu'il construit le DOM.

    Au cours de ce processus, votre toile originale du texte - celui que vous avez défini avant de commencer la Vue de l'application est perdu.

    Il n'y a aucun moyen de résoudre ce problème autrement que par l'utilisation d'un directivecomme dans mon jsFiddle exemple. Une Vue directive vous permet de capturer l'élément du DOM.

    Dans mon exemple, je définis une Vue directive appelée insert-message que j'utilise sur toile que v-insert-message. Cela me permet de capturer l'élément du DOM et ensuite faire les autres étapes: getContext et fillText. Il n'y a pas de id nécessaire, ou pas de code javascript à getElementById.

    Une chose de plus - votre toile est tout simplement trop grand, et, par conséquent, vous n'étiez pas en mesure de voir votre input et span éléments. Ils travaillent normalement dans votre exemple!

    EDIT: exemple de la directive liaisons

    Je viens de trouver une façon d'utiliser les directives et encore écrire de la dynamique des trucs dans la toile.

    Vérifier la mise à jour de jsFiddle: https://jsfiddle.net/mani04/r4mbh6nu/1/

  2. 10

    Voici une façon simple qui fonctionne avec Vuejs 2:

    1. Ajouter la toile pour vous modèle avec un attribut de référence:

      ref="myCanvas"

    2. Vous pouvez ensuite y accéder n'importe où à l'intérieur de votre composant à l'aide de

      var canvas=.$réf.myCanvas