使用vue.js绘制到画布上 [英] Drawing onto a canvas with vue.js

问题描述

我不认为这是一个基于Vue的问题，但我遇到了一些麻烦。

我想写一个画布a 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'：'这是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

解决方案

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

EDIT：已更新为动态文字： https://jsfiddle.net/mani04/r4mbh6nu/1/

在上面的例子中，我可以写并确保输入文本进入 span ，如您所料，所有使用Vue.js

回到你的例子，HTML是：

 < div id =app> 
< canvas id =canvaswidth =800height =600>< / canvas> 
< input type =textv-model =exampleContent/> 
< span> {{exampleContent}}< / span> 
< / div> 
  

Vue.js读取 #app 并将其保留为您的 Vue应用程式范本。因此，您的画布，输入和 span

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

除了使用指令，没有明确的方法解决这个问题，如我的jsFiddle示例。 Vue指令可帮助您捕获DOM元素。

在我的示例中，我定义了一个Vue指令 insert-message 我在画布上使用 v-insert-message 。这允许我捕获DOM元素，然后做其他步骤： getContext 和 fillText 。不需要 id ，也不需要任何JavaScript代码 getElementById 。

还有一件事 - 你的画布太大了，因此你不能看到你的输入和 span 元素。

p>我刚刚发现了一种使用指令并仍在将动态内容写入画布的方法。

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

I don't think this is necessarily a Vue based issue, but I'm running into some trouble.

I'd like to write to the canvas a Vue variable. If I remove vue, my initial code works fine, however if I add Vue the canvas doesn't actually start up.

Here is my 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);
    }
  }
});

If I comment out /* var v = new Vue({ ... the initial bit works. If I log the value of exampleContent in the watcher that also works. But something about the canvas isn't working.

Demo to play with: http://codepen.io/EightArmsHQ/pen/EgGbgR?editors=1010

解决方案

Please check this jsFiddle: https://jsfiddle.net/mani04/r4mbh6nu/

EDIT: updated with dynamic text: https://jsfiddle.net/mani04/r4mbh6nu/1/

In the above example, I am able to write into canvas, and also ensure that the input text goes into span as you would expect, all using Vue.js

Coming back to your example, the HTML is:

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

Vue.js reads the elements inside #app and keeps it as the template for your Vue app. So your canvas, input and span elements will now be re-rendered by Vue.js when it constructs the DOM.

During this process, your original canvas text - the one you set before initiating the Vue application gets lost.

There is no clear way to solve this issue other than using a directive, as in my jsFiddle example. A Vue directive helps you capture the DOM element.

In my example, I define a Vue directive called insert-message which I use on canvas as v-insert-message. This allows me to capture the DOM element and then do the other steps: getContext and fillText. There is no id required, or no javascript code to getElementById.

One more thing - your canvas is just too large, and therefore you were not able to see your input and span elements. They were working normally in your example also!

EDIT: example for directive bindings

I just found a way to use directives and still write dynamic stuff into canvas.

Check the updated jsFiddle: https://jsfiddle.net/mani04/r4mbh6nu/1/

这篇关于使用vue.js绘制到画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！