使用 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?editors=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、input 和 span 元素现在将由 Vue.js 在构造 DOM 时重新渲染。

在此过程中，您在启动 Vue 应用程序之前设置的原始画布文本会丢失。

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

在我的示例中，我定义了一个名为 insert-message 的 Vue 指令，我在画布上使用它作为 v-insert-message。这允许我捕获 DOM 元素，然后执行其他步骤：getContext 和 fillText。不需要id，或者getElementById 没有javascript 代码。

还有一件事 - 您的画布太大，因此您无法看到您的 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's Answer 中所述，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 代码片段是从 OP 的 CodePen 的分叉版本创建的

Answer 4

这个问题已经看过几次了，自从我第一次提出这个问题以来，我已经使用了数千次画布和 Vue。这是我在实践中找到的最佳选择。

如少数人所说，给画布一个ref：

<div id="app">
  <canvas width="800" height="600" ref="nameOfCanvas"></canvas>
</div>

在mounted函数中设置画布的context：

mounted(){
  this.canvas = this.$refs.nameOfCanvas;
  this.ctx = this.canvas.getContext("2d");
  this.render();
}

^{除非你想看，否则不需要将ctx放在data对象中。}

就是这样。从那里，可以创建一个render 方法并在您的组件中引用数据...

render(){
  this.ctx.clearRect(0,0,this.canvas.width, this.canvas.height);
  this.ctx.fillRect(0, 0, 20, 20);
}

您还可以在此方法中设置requestAnimationFrame 循环，如下所示：

render(){
  this.ctx.clearRect(0,0,this.canvas.width, this.canvas.height);
  this.ctx.fillRect(0, 0, 20, 20);
  requestAnimationFrame(this.render);
}

完整的演示/入门： https://codepen.io/EightArmsHQ/pen/gOROpqQ