用vue.js绘制到画布上

Tony小胖2020-03-13

我认为这不一定是基于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

阳光卡卡西2020/03/13 00:33:26

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

使用参考属性将画布添加到您的模板中：

ref="myCanvas"
然后，您可以使用来访问组件内部的任何位置

var canvas = this。$ refs.myCanvas

ㄏ囧囧ㄟ2020/03/13 00:33:26

请检查此jsFiddle：https ://jsfiddle.net/mani04/r4mbh6nu/

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

在上面的示例中，我能够使用Vue.js 编写画布，并确保input文本span按照您的预期输入

回到您的示例，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应用程序之前设置的文本会丢失。

除了directive在我的jsFiddle示例中使用之外，没有解决此问题的明确方法。Vue指令可帮助您捕获DOM元素。

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

还有一件事-您的画布太大，因此您看不到input和span元素。在您的示例中，它们也正常工作！

编辑：指令绑定的示例

我只是找到了一种使用指令并仍将动态内容写入画布的方法。

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer