8

私はいくつかのJavaScriptを使用して、ユーザーがクリック時にスケッチをキャンバス要素に動的にロードできるようにしています:

Processing.loadSketchFromSources('canvas_id', ['sketch.pde']);

Processing.loadSketchFromSources(...) を 2 回目 (または 3 回目 ...) に呼び出すと、2 回目 (または 3 回目 ...) の .pde ファイルがキャンバスに読み込まれます。

ユーザーが別のリンクをクリックして別のスケッチをロードし、前のスケッチを効果的にアンロードできるようにしたいと考えています。Processing に別のスケッチが実行されているかどうかを確認するために呼び出すことができるメソッド (または使用できる手法) はありますか?

私が見落としているある種の Processing.unloadSketch() メソッドはありますか? 単純にキャンバス DOM オブジェクトをドロップして再作成することもできますが、(1) 針が必要なときにハンマーを使用しているように見え、(2) 回避したい画面のちらつきが発生します。

私は JS の専門家ではありませんが、processing.js のソースを調べて、他にどのような関数が存在するかを調べるために最善を尽くしましたが、壁にぶつかっています。Processing.Sketches.length を調べて、何かが既にロードされているかどうかを確認できると思いましたが、単に配列からポップしてもうまくいかないようです (うまくいくとは思いませんでした)。

私はProcessingJS 1.3.6を使用しています。

4

3 に答える 3

5

他の誰かが解決策を探しに来た場合に備えて、これが私がやったことです。これはクロージャー内に配置されていることに注意してください（簡潔にするためにここには含まれていません）-したがって、this.launch = function()、何とか何とか... 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;
};
于 2012-06-26T02:54:29.113 に答える
3

私は Processing.js に詳しくありませんが、サイトのサンプル コードには次のようなものがあります。

var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it

したがって、あなたの場合、作成時に最初のインスタンスへのハンドルを保持する必要があります。

var p1 = Processing.loadSketchFromSources('canvas_id', ['sketch.pde']);

「アンロード」して新しいスケッチをロードする準備ができたら、自分でキャンバスをクリアする必要があると思います (しかしわかりません)。

p1.exit();
var canvas = document.getElementById('canvas_id'); 
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
// Or context.fillRect(...) with white, or whatever clearing it means to you

次に、物事の音から、別のスケッチを自由に添付できます。

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

繰り返しますが、私は実際にはそのライブラリに精通していませんが、これはドキュメントから簡単に見えます。

于 2012-06-25T09:33:46.120 に答える