Jquery 使用noLoop（）时，Processing.js的基于事件的重画效果更好

我使用Processing.js，jQuery 1.3.2供我使用，目标是Firefox 3.5、Safari 4和IE 8（通过ExplorerCanvas）。Processing.js网站说，“将Explorer Canvas与Processing.js一起使用通常会导致中等复杂的可视化效果无法使用帧速率。”在这种情况下，不需要动画，只需要一些简单的草图，所以帧速率不是问题。每次表单中的输入数据发生更改时，我只需要一个redraw（）。我99%在那里，只需要一点灵感就能控制IE

keyPressed（）可以很好地响应输入字段中的更改，但很遗憾，复选框和选择字段中的更改会被延迟，直到实际按下一个键。mousePressed（）仅在画布内单击时才会导致更新。用户体验有点急促和混乱。如何在任何键盘/鼠标事件中立即重新绘制草图

代码

在页面的主JavaScript块中，我设置了一个对象，用于在表单和Processing.js之间传递依赖于select字段的JSON数据，并将其作为放置IE标志的位置：

window.common = {};

当浏览器使用“条件注释”脚本时，我在“公共”对象中放置了一个布尔值：

Processing.js安装程序如下所示：

flag_for_IE = window.common.IE;

void setup()
{
    size(int(W), int(H));       // Canvas size as set above
    frameRate(4);               // Refresh rate in fps for FF & Safari
    stroke(darkSteelGrey);      // Set default linework color
    fill(medSteelGrey);         // Set default fill color
    background(lightBlue);      // Set background color
    if (flag_for_IE) {
        noLoop();               // Stop looping for IE.
    }
}

d_b = window.common.global_d_b;
tf_b = window.common.global_tf_b;

绘制循环如下开始，直接从表单获取所需的参数化数据：

void draw() {

/*  *****  ORDINARY DYNAMIC DATA FROM INPUT AND SELECT ELEMENTS  *****  */
/*
Some jQuery JavaScript is used here to get data provided by the user. Where 
necessary, invalid form entries are set equal to zero so the interactive 
sketching will be smoother.
*/
    var tp = float($('#id_tp').val());       // End plate thickness
    tp = isNaN(tp) ? 0.0 : tp;
    var bp = float($('#id_bp').val());       // End plate width
    bp = isNaN(bp) ? 0.0 : bp;
    var db = float($('#id_db').val());       // Bolt diameter

当表单中的更改启动AJAX请求时，数据进入draw（）循环，如下所示：

flag_for_IE = window.common.IE;

void setup()
{
    size(int(W), int(H));       // Canvas size as set above
    frameRate(4);               // Refresh rate in fps for FF & Safari
    stroke(darkSteelGrey);      // Set default linework color
    fill(medSteelGrey);         // Set default fill color
    background(lightBlue);      // Set background color
    if (flag_for_IE) {
        noLoop();               // Stop looping for IE.
    }
}

d_b = window.common.global_d_b;
tf_b = window.common.global_tf_b;

draw（）循环之后是条件重画逻辑：

/*  Redraw control for IE.  */
if (flag_for_IE) {
    redraw();

    void keyPressed() {
      redraw();
    }

    void mousePressed() {
      redraw();
    }
}

---

要在复选框上重新绘制并选择字段，只需使用jQuery将它们绑定到事件

$('#formid').find(':input').change(redraw);