0

Processing.jsを使用して、私がやろうとしていることさえ可能かどうか知りたい. Pomax のチュートリアル、Processing.js は JS 開発者ページのクイック スタート、PJS は Google グループです。すべて同じ処理スケッチ (以下の私の例では engine.pde) を使用します。各キャンバスはスケッチに変数を渡し、その結果が処理され、各キャンバスで異なる画像が開かれますが、それらは同じ方法で編集されます。

要約すると、多くのキャンバスで 1 つの処理スケッチのみを使用し、各キャンバスで処理スケッチに異なる名前を指定し、対応する背景画像を各キャンバスのスケッチで開きたいと考えています。

<!DOCTYPE html><html><head><meta charset="utf-8">
    <script src="../../../processingjs/processing.js"></script>
    <script>
        // Tell sketch what counts as JavaScript per Processing on the Web tutorial
        var bound = false;

        function bindJavascript(instance) { // Can I pass 'instance' like this?
            var pjs = Processing.getInstanceById(instance); 
            if(pjs!=null) {
                pjs.bindJavascript(this);
                bound = true; }
            if(!bound) setTimeout(bindJavascript, 250); }

        bindJavascript('B104');
        bindJavascript('B105');

        function drawSomeImages(instance) { 
            // This is where I am trying to tell processing that each canvas has a number, and the number is assigned to a corresponding image.
            var pjs = Processing.getInstanceById(instance);
            var imageName = document.getElementById(instance);
            pjs.setup(instance);
        }
        drawSomeImages('B104');
        drawSomeImages('B105');

        // Where is the Mouse?
        function showXYCoordinates(x, y) { ... this is working ... }


        // Send images back to server   
        function postAjax(canvasID) { ... AJAX Stuff is working ...}
    </script>
    </head>
<body>
    <canvas id="B104" data-processing-sources="engine.pde" onmouseout="postAjax('B104')"></canvas>
    <canvas id="B105" data-processing-sources="engine.pde" onmouseout="postAjax('B105')"></canvas>
</body>
</html>

そして処理側では：

/* @pjs preload=... this is all working ; */

// Tell Processing about JavaScript, straight from the tutorial...
  interface JavaScript {
    void showXYCoordinates(int x, int y); 
  }
  void bindJavascript(JavaScript js) {
    javascript = js; 
  }
  JavaScript javascript;

// Declare Variables
  PImage img;
  ... some other variables related to the functionality ...

void setup(String instance) {
  size(300,300);
  img = loadImage("data/"+instance+".png");
  //img = loadImage("data/B104.png"); Example of what it should open if canvas 104 using engine.pde
  background(img);
  smooth();
}

void draw() { ... this is fine ... }

void mouseMoved(){ ... just calls draw and checks if mouse is in canvas, fine... }

if(javascript!=null){
  javascript.showXYCoordinates(mouseX, mouseY); 
}}
4

1 に答える 1

0

すべて同じdata-processing-sources属性を持つ100万個のキャンバス要素をページに追加するだけで、すべて同じファイルが読み込まれます。Processing.jsは、必要な数のスケッチを作成します。スケッチファイルがそれぞれ同じであるかどうかは関係ありません=）

（説明したように、1つのスケッチインスタンスが複数のキャンバスにレンダリングされ、それぞれに異なるイメージが与えられるのは、スケッチの仕組みではありません。スケッチは、描画面としてキャンバスに関連付けられています。ただし、100万の「スレーブ」スケッチを作成できます。その唯一の責任は、JavaScriptから指示されたときに画像を描画し、マスタースケッチにスレーブスケッチに描画するように指示するようにJavaScriptに指示させることです。これは非常にばかげていることに注意してください。JavaScriptに画像を設定させるだけで、処理は必要ありません。あなたは本当に画像を表示しているだけです）

于 2013-03-04T19:36:06.930 に答える