Question

在下面的代码中，我循环遍历每个“player_visualizer”元素并尝试为每个元素创建一个新的P5实例。

如果我在循环中console.log(context)，我将获得该特定元素的上下文，这正是我需要的。

$('.player_visualizer').each(function (i) {

  context = $(this);

  playerVisualizersP5[i] = new p5(playerVisualizer, context);

});

然而，我遇到的麻烦是将特定元素的上下文传递给将处理所有P5动画的函数。

例如，当我尝试将该上下文变量传递给下面的函数并执行console.log(p.context)时，上下文变量始终是未定义。

 let playerVisualizer = function (p, context) {

      p.context = context;

 }

我已经就我能做些什么做了相当多的研究，但我似乎无法将其与我的特殊情况联系起来。我已经将我的研究范围缩小到以下几个资源。

http://hugoware.net/blog/passing-context-with-javascript

How do I pass the this context to a function?

非常感谢任何帮助或指导。

Answer 1

为什么你认为将某些内容传递到p5构造函数会自动将该参数传递给playerVisualizer函数？

来自the P5.js documentation：

最后一点：在创建p5实例时，您可以指定第二个实例参数（HTML元素id），它作为所有元素的父元素由草图创建。例如，假设你有：
<body>
  <div id = "p5sketch">
  </div>

  <p>Some other HTML</p>
</body>
你现在可以说：
var myp5 = new p5(s,'p5sketch');
所有元素都将在div中创建。

这意味着唯一有效的第二个参数是字符串ID，它被P5.js使用但不会传递给草图函数。

为了更好地了解正在发生的事情，让我们看一下这个例子：

var s = function( sketch ) {
  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
        sketch.background(128);
  };
};

var myp5 = new p5(s);

在此示例草图中，有几点需要理解：

myp5是p5的一个实例，其中包含P5.js函数，如setup()和draw()以及background()。
s是一个草图函数，它采用p5。
sketch是p5的一个实例，s可用于访问P5.js函数。

换句话说，myp5和sketch是同一个对象。

这对您很有用，因为如果您想将数据传递到sketch，您可以将这些数据传递到myp5，如下所示：

var s = function( sketch ) {


  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
        sketch.background(128);
        sketch.text(sketch.extraThing, 20, 20);
  };
};

var myp5 = new p5(s);
myp5.extraThing = "testing";

将$（this）传递给新的P5实例是未定义的

1 个答案: