相关文章推荐
有腹肌的卡布奇诺  ·  js ...·  2 月前    · 
酷酷的煎鸡蛋  ·  Golang WebSocket Ping ...·  12 月前    · 
火星上的西瓜  ·  Fabric JS ...·  1 年前    · 
谦和的豌豆  ·  initialization - Why ...·  2 年前    · 
贡献 创建一个新库

创建一个新库

p5.js库可以是扩展或添加到p5.js核心功能的任何JavaScript代码。有两种类型的库。核心库(p5.Sound)是p5.js分发的一部分,而贡献库是由p5.js社区的成员开发、拥有和维护的。

如果您创建了一个库并希望将其包含在 p5js.org/libraries 页面上,请提交 此表单

有许多不同的编写和使用JavaScript的方法,所以我们将此留给您。以下是一些关于使您的库与p5.js良好配合的注意事项。

代码

您可以通过向p5.prototype添加方法来扩展p5核心功能。

例如,dom.js中的以下代码扩展了p5,添加了一个 createImg() 方法,该方法在DOM中添加了一个 HTMLImageElement

p5.prototype.createImg = function (src) {
  const elt = document.createElement('img');
  //const elt = new Image; // 另一种更短的替代方法。
  elt.src = src;
  return addElement(elt, this);
};

当DOM库包含在项目中时,可以像调用 createCanvas() background() 一样调用 createImg()

对于内部辅助函数,请使用私有函数。

这些函数不打算由用户调用。在上面的示例中, addElement() dom.js 中的内部函数。但它并未公开绑定到 p5.prototype

您还可以通过向它们的原型添加方法来扩展p5.js类。

在下面的示例中, p5.Element.prototype 通过 html() 方法进行扩展,该方法设置元素的内部HTML。

p5.Element.prototype.html = function (html) {
  this.elt.innerHTML = html;
  //this.elt.textContent = html; // 使用textContent作为innerHTML的更安全替代方法。
};

使用registerPreloadMethod()在preload()中注册可以在其中调用的方法的名称。

通常,对于某些异步函数(例如加载声音、图像或其他外部文件),都会提供同步和异步选项。例如, loadStrings(path, [callback]) 接受可选的第二个回调参数 - 在loadStrings函数完成后调用的函数。但是,用户也可以在 preload() 中调用loadStrings而不使用回调,并且p5.js将等待直到 preload() 中的所有内容完成后再继续执行 setup() 。如果您想注册自己的方法,请使用要注册的方法的名称调用 registerPreloadMethod() ,并传递该方法所属的原型对象 (默认为p5.prototype) 。下面的示例显示了“soundfile.js”(p5.sound库)中注册 loadSound() 的一行。

p5.prototype.registerPreloadMethod('loadSound', p5.prototype);

异步函数的示例,用于 callback preload()

// 用于在preload()中或与回调一起使用的异步函数示例。
p5.prototype.getData = function (callback) {
  // 创建一个对象,该对象将从异步函数克隆数据并返回。
  // 我们将在下面更新该对象,而不是覆盖/重新分配它。
  // 对于preload()来说,保持原始指针/引用非常重要。
  // 使用const声明变量可确保它们不会被错误地重新分配。
  const ret = {};
  // 你正在处理的一些异步函数。
  loadDataFromSpace(function (data) {
    // 遍历data中的属性。
    for (let prop in data) {
      // 将ret的属性设置为data的属性(克隆)。
      // 也就是说,使用接收到的数据更新空ret对象的属性。
      // 但是,不能使用另一个对象覆盖/重新分配ret。
      // 而是需要更新其内容。
      ret[prop] = data[prop];
    // 检查callback是否确实是一个函数。
    if (typeof callback == 'function') {
      callback(data); // 执行回调。