J'utilise Processing.js, avec jQuery 1.3.2 à ma disposition, et je cible Firefox 3.5, Safari 4 et IE 8 (via ExplorerCanvas). Le site Web Processing.js indique que l'utilisation de Explorer Canvas avec Processing.js entraîne généralement des taux de trame inutilisables pour les visualisations modérément complexes. Eh bien, dans ce cas, l'animation n'est pas nécessaire, juste quelques croquis simples, donc le taux de trame n'est pas un problème. J'ai seulement besoin d'un redraw() chaque fois qu'il y a un changement dans les données d'entrée dans un formulaire. Je suis à 99% là-bas et j'ai besoin d'un seul morceau d'inspiration pour obtenir IE sous contrôle! KeyPressed() répond parfaitement aux changements dans les champs d'entrée, mais les changements de case à cocher et les champs sélectionnés sont malheureusement retardés jusqu'à ce qu'une touche soit enfoncée. mousePressed() ne provoque une mise à jour que lorsque vous cliquez sur à l'intérieur du canevas. L'expérience de l'utilisateur est un peu saccadée et confuse. Comment puis-je faire en sorte que l'esquisse soit immédiatement redessinée sur un événement clavier/souris?Meilleure base de données redraw() de Processing.js lors de l'utilisation de noLoop()
CODE
En bloc principal JavaScript de la page, je mis en place un objet pour transmettre des données JSON qui dépend de certains champs entre la forme et Processing.js, et aussi comme un endroit pour mettre le drapeau IE:
window.common = {};
Je mis un booléen dans le « commun » objet lorsque le navigateur est IE en utilisant un « commentaire conditionnel » script:
<!--[if IE]>
<script type="text/javascript">
window.common.IE = true;
</script>
<![endif]-->
Pour être complet, le « commun » objet reçoit les données JSON de cette façon, en utilisant la merveilleuse fonction 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];
}
});
La configuration Processing.js ressemble à ceci:
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.
}
}
La boucle de tirage commence comme cela, obtenir des données paramétriques nécessaires directe de la forme:
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
Lorsqu'une modification de la forme démarre une requête AJAX, les données proviennent dans la boucle draw() comme ceci:
d_b = window.common.global_d_b;
tf_b = window.common.global_tf_b;
Après le tirage au sort en boucle() vient la logique de redessiner conditionnelle:
/* Redraw control for IE. */
if (flag_for_IE) {
redraw();
void keyPressed() {
redraw();
}
void mousePressed() {
redraw();
}
}