无法在Vue中访问自定义画布属性

时间:2017-07-25 07:01:53

标签: vue.js vuejs2 aframe

有没有人将这个组件与Vue一起使用?

https://www.npmjs.com/package/aframe-draw-component

我想将高级用法与“aframe-draw-component”一起使用。 它适用于原始html但不适用于vue.js. codepen example

// html
<a-scene fog="type: exponential; color:#000">
  <a-sky acanvas rotation="-5 -10 0"></a-sky>
</a-scene>

// js
const chars = 'ABCDEFGHIJKLMNOPQRWXYZ'.split('')
const font_size = 8

AFRAME.registerComponent("acanvas", {
  dependencies: ["draw"],
  init: function(){
    console.log(this.el.components)
    this.draw = this.el.components.draw // get access to the draw component
    this.draw.canvas.width = '512'
    this.draw.canvas.height = '512'
    this.cnvs = this.draw.canvas
    const columns = this.cnvs.width / font_size
    this.drops = []
    for (let x = 0; x < columns; x++) {
      this.drops[x] = 1
    }
    this.ctx = this.draw.ctx
  },
  tick: function() {
    this.ctx.fillStyle = 'rgba(0,0,0,0.05)'
    this.ctx.fillRect(0, 0, this.cnvs.width, this.cnvs.height)
    this.ctx.fillStyle = '#0F0'
    this.ctx.font = font_size + 'px helvetica'
    for(let i = 0; i < this.drops.length; i++) {
      const txt = chars[Math.floor(Math.random() * chars.length)]
      this.ctx.fillText(txt, i * font_size, this.drops[i] * font_size)
      if(this.drops[i] * font_size > this.cnvs.height && Math.random() > 0.975) {
        this.drops[i] = 0 // back to the top!
      }
      this.drops[i] = this.drops[i] + 1
    }
    this.draw.render()
  }
})

无论我在哪里放入Vue组件,我都会收到此错误:

App.vue?b405:124 Uncaught(in promise)TypeError:无法读取undefined属性'canvas' 在NewComponent.init(eval at

找不到自定义依赖项“draw”。

有人能帮助我吗?

感谢。

1 个答案:

答案 0 :(得分:0)

在el.components.draw.canvas参考中可以使用canvas元素。

您可以创建独立的vue脚本,也可以将其附加到现有组件,如下所示:

AFRAME.registerComponent("vue-draw", {
init: function() {
  const vm = new Vue({
    el: 'a-plane',
    mounted: function() {
      setTimeout(function() {
        var draw = document.querySelector('a-plane').components.draw; /
        var ctx = draw.ctx;
        var canvas = draw.canvas;
        ctx.fillStyle = 'red';
        ctx.fillRect(68, 68, 120, 120);
        draw.render();
      }, 100)
    }
  });
}
})

工作小提琴:https://jsfiddle.net/6bado2q2/2/
基本上,我只是访问了画布,并告诉它绘制一个矩形。


请记住,当您尝试在绘图组件设法创建画布之前访问画布时,您的错误可能会持续存在。 我的简单解决方案只是暂停。由于场景加载并开始渲染速度比制作画布更快,我建议间隔检查画布元素是否以某种方式定义,然后触发vue.js脚本。
还要记住,您可以使用画布纹理构建现有画布元素:https://aframe.io/docs/0.6.0/components/material.html