Question

我有一个小的p5js脚本，我想在Meteor项目中加入。我把p5js本身放在client / compatibility / p5.min.js中，然后把我的p5js脚本放在client / p5js / sketch1.js中。

这是我的剧本：

<body>
    <canvas id="defaultCanvas0" class="" width="300" height="300" style="width: 100px; height: 100px;"></canvas>
    <div id="sketch1"></div>
</body>

它会在html中注入，但不会在id =＆＃34; sketch1＆＃34;的div下注入。这是打开控制台时的html：

{{1}}

为什么会发生这种情况的任何想法，以及我如何解决这个问题？通常的行为是画布在div中注入id =＆＃34; sketch1＆＃34;。

Answer 1

我找到了解决问题的方法。很简单的解决方案为了让p5js自己注入，必须渲染DOM。在我的情况下，DOM不会被渲染，因此画布不会被注入ID为＃34; sketch1＆＃34;的div。

解决方案是使用Meteor的onRendered方法：

Template.templateName.onRendered(function() {
    new p5(sketch1, "sketch1");
})

这确保在创建草图之前渲染DOM，然后将其注入到具有id＆＃34; sketch1＆＃34;的DOM元素中。

Answer 2

我还尝试将我的p5草图整合到Meteor中。但是我认为添加草图只会在模板中起作用很重要 - 如果 - 在这种情况下 - var sketch1被声明为全局变量。这是Meteor中的范围问题。因此，我在保存在Meteor var sketch1;文件夹中的var sketch2, sketch3;文件中声明了global.js以及我需要lib等所有其他草图。然后模板工作正常。

在流星项目中集成p5js

2 个答案: