jquery - 使用 noLoop() 时，Processing.js 更好的基于事件的 redraw()

Question

我正在使用Processing.js，可以使用jQuery 1.3.2，并针对Firefox 3.5、Safari 4和IE 8(通过ExplorerCanvas)。 Processing.js 网站称“将 Explorer Canvas 与Processing.js 一起使用通常会导致中等复杂的可视化的帧速率无法使用。”好吧，在这种情况下，不需要动画，只需一些简单的草图，因此帧速率不是问题。每次表单中的输入数据发生更改时，我只需要重绘()。我 99% 都同意，只需要一个灵感就能控制 IE!

keyPressed() 可以完美地响应输入字段中的更改，但不幸的是，复选框和选择字段中的更改的重绘会延迟，直到按下实际的键为止。 mousePressed() 仅在 Canvas 内单击时才会导致更新。用户体验有点不稳定和困惑。如何让草图在任何键盘/鼠标事件上立即重绘？

代码

在页面的主 JavaScript block 中，我设置了一个用于传递 JSON 数据的对象，该数据依赖于表单和Processing.js 之间的选择字段，并且还作为放置 IE 标志的位置:

window.common = {};

当浏览器是 IE 时，我使用“条件注释”脚本在“通用”对象中放置了一个 bool 值:

<!--[if IE]>
    <script type="text/javascript">
        window.common.IE = true;
    </script>
<![endif]-->

为了完整起见，“通用”对象以这种方式接收 JSON 数据，使用精彩的 jQuery getJSON 函数:

$.getJSON(xhr_url, function(json, status){
    /*  
        This is the equivalent of writing either 
        "window.common.global_d_b = json[d];" or
        "window.common.global_d_c = json[d];" for 
        each property, such as "d," in the json object,
        and subscripts "_b" or "_c".  
    */
    for (var property in json) {
        window.common['global_' + property + subscript] = json[property];
    }
});

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.
    }
}

绘制循环像这样开始，直接从表单获取所需的参数数据:

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() 循环，如下所示:

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();
    }
}

Answer 1

要重绘复选框和选择字段，您只需将它们绑定(bind)到 change使用 jQuery 的事件。

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