有没有人将这个组件与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”。
有人能帮助我吗?
感谢。
答案 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/
基本上,我只是访问了画布,并告诉它绘制一个矩形。