Question

我将p5库添加到dom中就像这样......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/addons/p5.dom.js"></script>
</head>
<body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
</body>
</html>

从技术上讲，我应该能够通过我的Vue代码中的window变量获取它...

<template>
    <div id="app">
        <h1>Hey my app!</h1>
    </div>
</template>
<script>
export default {
    name: 'app',
    mounted() {
        console.log(window.p5) // it's found
        window.p5.createCanvas(640, 480);
    },
}
</script>

然而错误日志显示： TypeError: window.p5.createCanvas is not a function。记录window.p5后，我可以看到它在那里。不是createCanvas()。这让我觉得它并不完全存在。有没有人遇到过这个问题？如何在我的Vue应用程序中成功导入p5并使用它？

Answer 1

您无法随机调用createCanvas()功能。您必须在调用setup()函数后执行此操作。

此处有更多信息：Why can't I assign variables using p5 functions and variables before setup()?

要解决您的问题，您需要将调用放在setup()函数中，或者需要使用按需实例模式（如上面链接中所述）或实例模式（如{{ 3}}）。

将p5导入Vue应用程序

1 个答案: