如何访问processing.js‘宽度’和‘高度’以外的processing.js函数

Question

我最近从使用Khan Academy的processing.js环境到真正的交易实现了飞跃，现在我有点困惑了。

我有一个简单的processing.js程序，基本上画一个圆圈，我希望这个圆圈的大小取决于画布的宽度。

如果我在processing.js函数中打印宽度，比如安装程序，就会显示正确的500‘m宽度。不幸的是，每当我试图访问processing.js函数之外的width属性时，它都会显示默认的100 of大小，尽管画布本身的宽度是500 of。

我认为我可能使用了一个相当丑陋的处理和javascript混合，这可能是我的问题的根源。你的帮助将不胜感激！

Processing.js

///* PROCESSING.JS SETUP *///
void setup() {
    size(500, 500);
    println(width); // WORKS! :)
}

println(width); // DOESN'T WORK... :(

///* GLOBAL VARIABLES *///
var moleculeQuantity = 1;

///* OBJECT CONSTUCTORS *///
var Molecule = function(x, y) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
};

Molecule.prototype.draw = function() {
    noStroke();
    fill(88, 91, 183);
    ellipse(this.x, this.y, 70, 70);

    fill(225, 227, 228);
    ellipse(this.x, this.y, 40, 40);
};

// Fill array with molecule objects
var molecules = [];
for (var i = 0; i < moleculeQuantity; i++) {
    molecules[i] = new Molecule(200, 100);
}

///* DRAW FUNCTION *///
void draw() {
    background(225, 227, 228);
    molecules[0].draw();
}

Answer 1

您的问题与混合处理和JavaScript无关，也与异步执行无关。比那简单多了。

想想您的代码执行的顺序。方法之外的任何内容都将在调用函数的之前执行setup()。在您的示例中，这意味着在通过调用width函数更改变量之前访问它。

您必须更改代码，以便在调用setup()之后触发代码。最简单的方法是将代码移到setup()函数的末尾，或者放到setup()之后调用的函数中，比如draw()或event。

您可能会认为，因为您的函数调用在代码中的setup()函数下面，所以setup()调用首先发生，但它不会发生。您只需定义了 setup()函数--它还没有被调用(通过处理)！尝试将函数外的任何代码移到草图的顶部，以使其更加明显：

println(width); // this happens first, so width is still 100

void setup() {
    size(500, 500);
    println(width); //now that size() has been called, the width is 500
}

编辑：，我将尝试解释事件的顺序。下面是加载包含Processing.js草图的页面时所发生的情况：

1. 页面被加载。
2. Processing.js本身是加载的。
3. Processing.js将处理代码编译为JavaScript代码。
4. 您的代码(现在是JavaScript代码)是加载的。像setup()和draw()这样的函数在这一步是定义的，但尚未调用。函数之外的代码被调用。这就是你看到100被打印出来的时候。
5. Processing.js调用步骤4中定义的setup()函数，这是设置width的时候。
6. Processing.js开始每秒60次调用draw()函数。

至于你应该把你的变量和函数放在哪里，这完全取决于你想要对它们做什么。但是，您可以将变量的initialization声明放在草图的顶部，并将其放在setup()函数中。这样，您可以在任何地方访问它的值，但您知道在setup()运行之前不会设置它。就像这样：

float middleX;

void setup(){
   size(500, 500);
   middleX = width/2;
}

void draw(){
   background(0);
   ellipse(middleX, mouseY, 10, 10);
}