3
我正在使用Processing.js，jQuery 1.3.2可供我使用，並且針對Firefox 3.5，Safari 4和IE 8（通過ExplorerCanvas）。 Processing.js網站上說：「使用帶有Processing.js的Explorer Canvas通常會導致幀率不穩定，無法實現中等複雜的可視化效果。」那麼，在這種情況下，動畫不是必需的，只是一些簡單的素描，所以幀速率不是問題。每次在表單中輸入數據發生變化時，我只需要重繪（）。我在那裏99％，只需一張靈感就可以控制IE！使用noLoop（）處理Processing.js時，更好的基於事件的重繪（）
keyPressed（）完美地響應輸入字段中的更改，但在複選框中重新繪製更改，並且選擇字段不幸被延遲，直到按下實際按鍵。 mousePressed（）僅在畫布中單擊時導致更新。用戶體驗有點生澀和混亂。如何讓草圖立即在任何鍵盤/鼠標事件上重繪？
CODE
在頁面的主要的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請求，該數據進入這樣的拉伸（）循環：
d_b = window.common.global_d_b;
tf_b = window.common.global_tf_b;
平局（）循環後的是條件重繪邏輯：
/* Redraw control for IE. */
if (flag_for_IE) {
redraw();
void keyPressed() {
redraw();
}
void mousePressed() {
redraw();
}
}