Vue.js Can’；无法访问Vue中的自定义画布属性

是否有人将此组件与Vue一起使用

我想使用“一帧绘制组件”的高级用法。 它适用于原始html，但不适用于vue.js

//html
//js
常量字符='ABCDEFGHIJKLMNOPQRWXYZ'。拆分（“”）
常量字体大小=8
注册表组件（“acanvas”{
依赖项：[“绘制”]，
init:function（）{
console.log（this.el.components）
this.draw=this.el.components.draw//访问绘图组件
this.draw.canvas.width='512'
this.draw.canvas.height='512'
this.cnvs=this.draw.canvas
const columns=this.cnvs.width/font\u size
this.drops=[]
for（设x=0；xthis.cnvs.height&&Math.random（）>0.975）{
this.drops[i]=0//返回顶部！
}
this.drops[i]=this.drops[i]+1
}
this.draw.render（）
}
})

无论我将Vue组件放在何处，都会出现以下错误：

App.vue？b405:124未捕获（承诺中）类型错误：无法读取未定义的属性“canvas” 在NewComponent.init（在

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

有人能帮我吗

---

谢谢。

画布元素可在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)
    }
  });
}
})

工作小提琴：
基本上，我只是访问画布，并告诉它绘制一个矩形。

---

请记住，在绘图组件创建画布之前尝试访问画布时，错误可能会持续存在。

---

---

我的无脑解决方案只是一个超时。由于场景加载和开始渲染的速度比绘制画布的速度快，我建议进行一次间隔检查，检查画布元素是否以某种方式定义，然后启动vue.js脚本。

---

还请记住，您可以使用内置画布纹理处理现有画布元素：

请提供一些您尝试过的代码，以便有人有机会以某种方式帮助您。我发现我现在的问题是我不知道如何使用具有高级用法的框架绘制组件。当我在Vue文件中导入框架，框架绘制组件时，我在控制台中检查框架。我找不到绘制组件。您能给我一些代码笔中的示例吗在vue模板内部？谢谢。@KevinHu 1.您想在控制台的“元素”选项卡或aframe检查器中找到它？2.所谓vue模板，您的意思是：链接到a-frame-extras？是的，就像您的示例。我可以在vue模板中使用a-frame，但我想使用aframe draw组件的注册表组件在一个框架中找不到绘图组件。您可以在示例中使用一个框架绘图组件吗？

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