3

我正在使用 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 块中，我设置了一个对象，用于传递 JSON 数据，该数据依赖于表单和 Processing.js 之间的选择字段，同时也是放置 IE 标志的地方：

window.common = {};

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

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

1 回答 1

2

要重绘复选框并选择字段，您可以使用 jQuery将它们绑定到更改事件。

$('#formid').find(':input').change(redraw);
于 2011-04-09T17:48:43.693 回答