时间戳

首页 > 解决方案 > 将参数传递给 ES6 闭包（用于多个 P5.js 草图）

javascript - 将参数传递给 ES6 闭包（用于多个 P5.js 草图）

问题描述

我正在尝试制作一个“通用”P5.js 草图，我可以根据传入的参数对其进行调整，目的是能够在单个页面上生成多个草图，以显示不同的输入如何并排工作-边。

按照指南，我看到这样的语法（我已经扩展它以填充多个 div：

const s = ( sketch ) => {

  let x = 100;
  let y = 100;

  sketch.setup = () => {
    sketch.createCanvas(500, 500);
    console.log(idx);
  };

  sketch.draw = () => {
    sketch.background(100);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
    sketch.text
  };
};

let myp5_1 = new p5(s, document.getElementById('p5-sketch1'));
let myp5_2 = new p5(s, document.getElementById('p5-sketch2'));
let myp5_3 = new p5(s, document.getElementById('p5-sketch3'));

我对 ES6 不是很好，但我正在努力传递一组参数以便能够调整 P5.js 代码。

我想做的是将一个 ID 变量传递给每个实例，s并让草图以不同的方式执行，而不是进行三个单独的const s调用和复制数据。

标签： javascriptecmascript-6closuresp5.js

解决方案

创建一个接受 idx 并返回原始函数的函数。

const s = (idx) => ( sketch ) => {

  let x = 100;
  let y = 100;

  sketch.setup = () => {
    sketch.createCanvas(500, 500);
    console.log(idx);
  };

  sketch.draw = () => {
    sketch.background(100);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
    sketch.text
  };
};

let myp5_1 = new p5(s(0), document.getElementById('p5-sketch1'));
let myp5_2 = new p5(s(1), document.getElementById('p5-sketch2'));
let myp5_3 = new p5(s(2), document.getElementById('p5-sketch3'))

推荐阅读