Impossible d'accéder à l'attribut canvas personnalisé dans Vue

Question

Est-ce que quelqu'un a utilisé ce composant avec Vue?

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

Je veux utiliser l'utilisation avancée avec "aframe-draw-component". cela fonctionne avec le html brut mais pas 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() 
    } 
}) 

Peu importe où je mets dans le composant Vue, je reçois cette erreur:

App.vue B405: 124 Uncaught (en promesse) TypeError: Impossible 'toile' lire la propriété de non définie à NewComponent.init (eval à

Il ne peut pas trouver la dépendance personnalisée « tirer ».

quelqu'un peut me aider?

Merci.

Answer 1

L'élément canvas est à votre disposition dans la référence el.components.draw.canvas.

Vous pouvez créer Votre script autonome vue, ou l'attacher à un composant existant comme celui-ci:

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) 
    } 
    }); 
} 
}) 

violon travail: https://jsfiddle.net/6bado2q2/2/
Fondamentalement, je viens d'accéder à la toile, et dit à dessiner un rectangle.

---

Veuillez garder à l'esprit que votre erreur peut persister lorsque vous tentez d'accéder au canevas avant que le composant dessiné réussisse à le créer.

---

Ma solution simple était juste un délai d'expiration. Puisque la scène se charge, et commence à rendre le rendu plus rapidement, que la toile est faite, je suggérerais de faire une vérification d'intervalle si l'élément canvas est défini d'une manière ou d'une autre, puis de déclencher le script vue.js.

---

Gardez également à l'esprit que vous pouvez travailler sur des éléments de canevas existants avec la texture de canevas: https://aframe.io/docs/0.6.0/components/material.html