8
votes

"Décharger" de manière dynamique un traitement JS Croquis de la toile

J'utilise du JavaScript pour permettre aux utilisateurs de charger de manière dynamique un croquis de cliquer sur un élément de toile utilisant:

Traitement.Loadsketchfromsources ('Canvas_id', ['Sketch.pde']);

Si j'appelle Traitement.loadsketchfromsources (...) une seconde (ou une troisième ...), il charge une seconde (ou troisième ...) fichier .pde sur la toile, ce que j'attendrais.

J'aimerais que l'utilisateur puisse cliquer sur un autre lien pour charger une esquisse différente, décharger efficacement le précédent. Existe-t-il une méthode que je peux appeler (ou une technique que je peux utiliser) pour vérifier si le traitement a une autre esquisse en cours d'exécution et, dans l'affirmative, indiquez-la de la décharger en premier?

Y a-t-il une sorte de méthode de traitement.unloadsketch () que je suis surplombant? Je pourrais simplement laisser tomber l'objet de toile Dom et le recréer, mais que (1) semble utiliser un marteau lorsque j'ai besoin d'une aiguille et (2) il en résulte un scintillement de l'écran que j'aimerais éviter.

Je ne suis pas expert JS, mais j'ai fait de mon mieux pour regarder à travers la source de traitement.js pour voir quelles autres fonctions peuvent exister, mais je frappe un mur. Je pensais peut-être que je pourrais peut-être regarder la transformation.sketches.Length pour voir si quelque chose est déjà chargé, mais il suffit de le sauter du tableau ne semble pas fonctionner (ne le pensait pas).

J'utilise TraitementJs 1.3.6.


0 commentaires

3 Réponses :


3
votes

Je ne connais pas le traitement.js, mais l'exemple de code du site a ceci: xxx pré>

Donc, dans votre cas, vous voudrez garder une poignée au premier instance lorsque vous le créez: p> xxx pré>

Lorsque vous êtes prêt à "décharger" et chargez un nouveau croquis, je suppose (mais je ne sais pas) que vous " Il faut effacer vous-même la toile: p> xxx pré>

puis, du son des choses, vous êtes libre de joindre un autre croquis: P>

var p2 = Processing.loadSketchFromSources('canvas_id', ['sketch2.pde']);


1 commentaires

Merci d'avoir répondu .. il m'a eu 75% là-bas ... Il existe deux "modes" d'utiliser le traitement en JavaScript: (1) chargez un fichier de traitement .pde de manière dynamique ou (2) écrire votre script de traitement dans JS. La «défaute fatale» est que .Loadsketchfromsources () ne semble pas retourner une poignée utilisable. Au lieu de cela, vous devez regarder traitement.Instances.length pour déterminer celui-ci actuellement en cours d'exécution. Si tel est le cas, vous pouvez appeler traitement.Instances [0] .exit () ... à condition qu'il n'y ait qu'un seul script en cours d'exécution. (Désolé, je ne peux pas +1 votre réponse - je n'ai pas assez de pts pour cela).



5
votes

Si quelqu'un d'autre vient à la recherche de la solution, voici ce que j'ai fait cela fonctionnant. Notez que cela a été placé à l'intérieur d'une fermeture (non inclus ici pour la brièveté) - D'où le this.launch = fonction () em>, bla bla bla ... ymmv.

/**
 * Launches a specific sketch. Assumes files are stored in
 * the ./sketches subdirectory, and your canvas is named g_sketch_canvas
 * @param {String} item The name of the file (no extension)
 * @param {Array} sketchlist Array of sketches to choose from
 * @returns true
 * @type Boolean
 */
this.launch = function (item, sketchlist) {
    var cvs = document.getElementById('g_sketch_canvas'),
        ctx = cvs.getContext('2d');
    if ($.inArray(item, sketchlist) !== -1) {
        // Unload the Processing script
        if (Processing.instances.length > 0) {
            // There should only be one, so no need to loop
            Processing.instances[0].exit();
            // If you may have more than one, then use this loop:
             for (i=0; i < Processing.instances.length; (i++)) {
            //  Processing.instances[i].exit();
            //}
        }
        // Clear the context
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, cvs.width, cvs.height);
        // Now, load the new Processing script
        Processing.loadSketchFromSources(cvs, ['sketches/' + item + '.pde']);
    }
    return true;
};


3 commentaires

Beau travail répondant à votre propre question. Bienvenue dans la pile débordement :)


Salut im ayant un problème, traitement.Instances.length retourne (0) même si j'ai 2 esquisses qui fonctionnent bien sur ma page Web. Avez-vous dû remplir le traitement.Instances lors du chargement d'un croquis avant la fonction de déchargement?


De plus, ce billet semble être important ici: traitement-js.lighthouseapp.com/projects/41284-Processingjs/ ...



0
votes

comme de la transformation.js 1.4.8, Andrew's a accepté la réponse (et les autres réponses que j'ai trouvées ici) ne semble plus travailler.

C'est ce qui a fonctionné pour moi: P>

    var pjs = Processing.getInstanceById('pjs');
    if (typeof pjs !== "undefined") {
      pjs.exit();
    }

    var canvas = document.getElementById('pjs')
    new Processing(canvas, scriptText);


2 commentaires

Désolé de contredire cela, mais le code de la question semble fonctionner dans 1.4.8 et cette réponse ne semble pas fonctionner.


Je suis vraiment loin de cela et je ne peux pas vraiment vous dire plus que ce que j'ai écrit ci-dessus. Tout ce que je peux dire: il n'y a pas de code dans la question ... Je ne peux donc pas vraiment vérifier si votre commentaire est correct ou non.