在Meteor项目中集成p5js

Integrating p5js in a Meteor project

本文关键字：集成 p5js 项目 Meteor      更新时间：2023-09-26

我有一个小的p5js脚本，我想把它合并到Meteor项目中。我把p5js本身放在client/compatibility/p5.min.js中，把我的p5js脚本放在client/p5js/sketch1.js.中

这是我的脚本：

var sketch1 = function (s) {
    s.setup = function () {
        s.createCanvas(100, 100);
        s.background(100);
    };
    s.draw = function () {
    }
};
new p5(sketch1, "sketch1");

它确实被注入到html中，但不是在id="sketch1"的div下。这是我打开控制台时的html：

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

有什么想法吗？为什么会发生这种情况，我该如何解决？通常的行为是将画布注入id="sketch1"的div中。

我找到了解决问题的方法。非常简单的解决方案。为了让p5js注入自己，必须呈现DOM。在我的例子中，DOM没有被渲染，因此画布没有被注入到id为"sketch1"的div中。

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

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

这样可以确保在创建草图之前渲染DOM，然后将其注入到id为"sketch1"的DOM元素中。

我还尝试在Meteor中集成我的p5草图。但我认为需要补充的是，只有在var sketch1被声明为全局变量的情况下，草图才能在模板中工作。这是《流星》中的一个范围问题。因此，我在Meteor lib文件夹中保存的global.js文件中声明了var sketch1;和所有其他需要var sketch2, sketch3;的草图等。然后模板工作正常。

相关文章：