使用 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

原文由 Djave 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 在构建时重新渲染。

在此过程中，您在启动 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/

原文由 Mani 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一种适用于 Vuejs 2 的简单方法：

1. 使用引用属性将画布添加到您的模板中：

ref="myCanvas"

1. 然后，您可以使用组件内的任何位置访问它

var canvas = this.$refs.myCanvas

原文由 tariqdaouda 发布，翻译遵循 CC BY-SA 3.0 许可协议