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

Question

有没有人在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未捕获的（以诺）类型错误：在不确定的 无法读取属性“画布” NewComponent.init（EVAL在

它不能找到自定义依赖“画”。

有人可以帮我吗？

谢谢。

Answer 1

canvas元素在el.components.draw.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