如何在 processing.js 函数之外访问 processing.js 'width' 和 'height'

Question

我最近从使用可汗学院的 processing.js 环境到真正的交易有了飞跃，我有点困惑。

我有一个简单的 processing.js 程序，主要是画一个圆，我希望这个圆的大小由 canvas 的宽度决定。

如果我在 processing.js 函数中打印宽度，比如设置，我会看到正确的 500px 宽度。不幸的是，每当我尝试在 processing.js 函数之外访问宽度属性时，它显示默认的 100px 大小，即使 canvas 本身是 500px 宽。

我想我可能使用了相当丑陋的处理和 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() 函数被调用之前执行。在您的情况下，这意味着您在通过调用 size() 函数更改 width 变量之前访问它。

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

您可能认为，因为您的函数调用在代码中的 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 草图的页面时发生的情况：

页面已加载。
Processing.js本身已加载。
Processing.js 将您的 Processing 代码编译成 JavaScript 代码。
您的代码（现在是 JavaScript 代码）已加载。 setup() 和 draw() 等函数在这一步被定义，但尚未调用。调用函数之外的代码。这是当您看到 100 被打印出来时。
Processing.js 调用在步骤 4 中定义的 setup() 函数。这是在设置 width 时。
Processing.js 开始每秒调用 draw() 函数 60 次。

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

float middleX;

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

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

如何在 processing.js 函数之外访问 processing.js 'width' 和 'height'

How to access processing.js 'width' and 'height' outside processing.js functions

javascript

processing

canvas

processing.js