使用vue.js绘制到画布上

Question

我认为这不一定是基于Vue的问题,但我遇到了一些麻烦.

我想在画布上写一个Vue变量.如果我删除vue,我的初始代码工作正常,但是如果我添加Vue,画布实际上并没有启动.

这是我的代码

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);
    }
  }
});

如果我评论出/* var v = new Vue({ ...初始位有效.如果我记录exampleContent观察者的值也可以.但关于画布的一些东西是行不通的.

演示:http: //codepen.io/EightArmsHQ/pen/EgGbgR？edit = 1010

Answer 1

请检查这个jsFiddle:https://jsfiddle.net/mani04/r4mbh6nu/

编辑:使用动态文本更新:https://jsfiddle.net/mani04/r4mbh6nu/1/

在上面的例子中,我能够写入画布,并确保input文本span按照您的预期进入,所有使用Vue.js

回到你的例子,HTML是:

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

Vue.js读取内部元素#app并将其作为Vue应用程序的模板.因此canvas,当构造DOM时,Vue.js将重新呈现您的元素input和span元素.

在此过程中,原始画布文本 - 在启动Vue应用程序之前设置的文本文本将丢失.

除了使用a之外directive,没有明确的方法来解决这个问题,就像在我的jsFiddle示例中一样.Vue指令可帮助您捕获DOM元素.

在我的例子中,我定义了一个insert-message我在canvas上使用的Vue指令v-insert-message.这允许我捕获DOM元素,然后执行其他步骤:getContext和fillText.没有id必需的,或没有javascript代码getElementById.

还有一两件事-你的画布只是过大,因此你无法看到您input和span元素.他们也在你的例子中正常工作!

编辑:指令绑定的示例

我刚刚找到了一种使用指令的方法,并且仍然将动态内容写入画布.

检查更新的jsFiddle:https://jsfiddle.net/mani04/r4mbh6nu/1/

Answer 2

这是一个与Vuejs 2一起使用的简单方法:

1. 使用引用属性将画布添加到模板:

   ref="myCanvas"

2. 然后,您可以使用在组件内的任何位置访问它

   var canvas = this.$ refs.myCanvas

Answer 3

正如在@Mani的答案中详述的那样,Vue删除并重新呈现调用了Vue实例的DOM元素.

如果将画布更新抽象为Vue实例method,则可以在mounted生命周期钩子中触发它(获取初始值exampleContent),watch在exampleContent更改时重新调用它.

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

canvas{
  background:red;
  width:800px;
  height:600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<div id="app">
  <canvas id="canvas" width="800" height="600"></canvas>
  <input type="text" v-model="exampleContent" />
  <span>{{ exampleContent }}</span>
</div>

前面的SO Code Snippet是从OP的CodePen的分叉版本创建的