1

我目前正在尝试在 vue.js 中创建这个应用程序（https://repl.it/@prophetorpheus/collaborative-sketch）作为我的 App.vue 文件的 vue 组件。

当我尝试在我的 vue 组件中调用 setup 函数时（我称之为 Whiteboard.vue），我收到此错误：

[Vue warn]: Error in v-on handler: "TypeError: vue_p5__WEBPACK_IMPORTED_MODULE_8__.createCanvas is not a function"

found in

---> <Whiteboard> at src/components/Whiteboard.vue
       <App> at src/App.vue
         <Root>

我是在做一些根本错误的事情，还是由于我的方法和链接的应用程序之间的版本不同而出现问题？

这些是我的代码的相关部分（据我能够判断它们与问题相关：D），（我更改了firebase配置数据）：

<template>
      <div>
        <button @click="execute">hit me</button>
      </div>
    </template>



    <script>
    import Vue from "vue";
    import firebase from "firebase";
    import p5 from "p5";
    import * as vuep5 from "vue-p5";

    // Initialize Firebase
    var config = {
      apiKey: "------------",
      authDomain: "--------------",
      databaseURL: "--------------",
      projectId: "-------------",
      storageBucket: "----------------",
      messagingSenderId: "----------------"
    };
    firebase.initializeApp(config);

    var pointsData = firebase.database().ref();
    var points = [];

    function setup() {
      var canvas = vuep5.createCanvas(1500, 1500);
      vuep5.background(255);
      vuep5.fill(0);
      pointsData.on("child_added", function(point) {
        points.push(point.val());
      });
      canvas.mousePressed(drawPoint);

      canvas.mouseMoved(function() {
        if (mouseIsPressed) {
          drawPoint();
        }
      });
    }

    function draw() {
      background(255);
      for (var i = 0; i < points.length; i++) {
        var point = points[i];
        ellipse(point.x, point.y, 5, 5);
      }
    }

    function drawPoint() {
      pointsData.push({
        x: mouseX,
        y: mouseY
      });
      return false;
    }

    export default {
      name: "Whiteboard",
      data() {
        return {};
      },
      methods: {
        execute() {
          setup();
          draw();
          drawPoint();
        }
      }
    };
    </script>

我的目标是使用 vue、firebase 的实时数据库和 p5 创建一个可以工作的实时协作白板绘图应用程序。感谢您提前提出任何建议。

4

0 回答 0