제 처분으로 Processing.js를 사용하고 있으며, Firefox 3.5, Safari 4 및 IE 8 (ExplorerCanvas를 통해)을 대상으로하고 있습니다. Processing.js 웹 사이트는 "Explorer.Canvas를 Processing.js와 함께 사용하면 일반적으로 복잡한 시각화에 사용할 수없는 프레임 속도가 발생합니다."라고 말합니다. 음,이 경우에는 애니메이션이 필요하지 않으며 단순한 스케치 만하기 때문에 프레임 속도는 문제가되지 않습니다. 양식의 입력 데이터가 변경 될 때마다 redraw() 만 필요합니다. 저는 99 %의 비용으로 IE를 제어하기 위해 영감을 얻으 려합니다.noLoop()을 사용할 때 Processing.js의 이벤트 기반 redraw()를 개선했습니다.
keyPressed()는 입력 필드의 변경 사항에 완벽하게 응답하지만 체크 상자의 변경 사항을 다시 그리며 실제 키를 누를 때까지 선택 필드가 지연됩니다. mousePressed()는 캔버스 내부에서 을 클릭 할 때만 업데이트를 발생시킵니다.. 사용자 경험이 약간 엉망이고 혼란 스럽습니다. 어떤 키보드/마우스 이벤트에서 즉시 다시 그리도록 스케치를 얻으려면 어떻게해야합니까?
페이지의 주요 자바 스크립트 블록에서 코드
, 나는 IE 플래그를 넣어 장소로도 형태와 Processing.js 사이의 선택 필드에 의존 JSON 데이터를 전달하는 객체를 설정하고 :
window.common = {};
내가 브라우저가 IE는 "조건부 코멘트"스크립트를 사용 할 때 "일반적인"개체에 부울을 넣어 : 완성도를 들어
<!--[if IE]>
<script type="text/javascript">
window.common.IE = true;
</script>
<![endif]-->
을은 "일반적인" 객체는 멋진 jQuery를해서 getJSON 함수를 사용하여,이 방식으로 JSON 데이터를 수신 :
Processing.js 설정은 다음과 같습니다$.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];
}
});
:
추첨 루프는 다음과 같이 시작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 요청 킥오프, 데이터는 다음과 같이 연신() 루프로 제공 : 012,351
추첨() 루프 후 6,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();
}
}