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

时间:2016-01-07 17:16:02

标签: javascript canvas processing processing.js

我最近实现了从使用Khan Academy的processing.js环境到实际交易的飞跃,并且让我感到有些困惑。

我有一个简单的processing.js程序,基本上绘制一个圆圈,我希望这个圆圈的大小由画布的宽度决定。

如果我在processing.js函数中打印宽度,比如setup,我会显示正确的500px宽度。不幸的是,每当我尝试访问processing.js函数之外的width属性时,它都会显示默认的100px大小,即使画布本身宽度为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();
}

1 个答案:

答案 0 :(得分:3)

您的问题与混合处理和JavaScript无关,它与异步执行无关。它比这简单得多。

考虑代码执行的顺序。方法之外的任何内容都将在之前执行调用setup()函数。在您的情况下,这意味着您在通过调用width函数进行更改之前访问了size()变量。

您必须更改代码,以便在调用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草图的页面时发生的情况:

  1. 页面已加载。
  2. Processing.js本身已加载。
  3. Processing.js将您的Processing代码编译成JavaScript代码。
  4. 您的代码(现在是JavaScript代码)已加载setup()draw()等函数在此步骤中已定义,但尚未调用。调用函数之外的代码。这是当您看到100被打印出来时。
  5. Processing.js调用在步骤4中定义的setup()函数。这是width设置的时间。
  6. Processing.js开始每秒调用draw()函数60次。
  7. 至于你应该放置变量和函数的位置,完全取决于你想用它们做什么。但是,您可以在草图顶部放置一个变量声明,在setup()函数中放置初始化。这样你就可以在任何地方访问它的价值,但是你知道在setup()运行之前它不会被设置。像这样:

    float middleX;
    
    void setup(){
       size(500, 500);
       middleX = width/2;
    }
    
    void draw(){
       background(0);
       ellipse(middleX, mouseY, 10, 10);
    }