無法訪問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