使用Processing.js：我可以使用只有一個數據處理源sketch.pde的多個畫布嗎？

使用Processing.js，我想知道我試圖做甚至可能。我查看了Pomax的教程，Processing.js是JS開發者頁面的快速入門，PJS是Google小組，在這裏，我似乎無法找到對這個問題的答案：「你可以有多個畫布，這樣他們所有使用相同的處理草圖（在我的示例中，engine.pde）每個畫布將變量傳遞給草圖，處理的結果會在每個畫布中打開不同的圖像，但以相同的方式編輯它們。使用Processing.js：我可以使用只有一個數據處理源sketch.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); 
}}

來源

2013-03-04 anthonyCarton

只需添加一百萬的畫布元素到您的網頁都具有相同的數據處理來源屬性，所以他們都加載相同的文件。 Processing.js會根據你的要求構建儘可能多的草圖，它並不在意每個草圖文件是否相同=）

（請注意，你描述的是一個草圖實例渲染到多個畫布上，每個不同的圖像都不是草圖的工作方式，草圖與畫布作爲繪圖表面相關聯，但是，您可以製作一百萬個「奴隸」草圖，其唯一的責任是在JavaScript指示下繪製圖像，主草圖告訴JavaScript告訴從草圖繪製，注意這非常非常愚蠢，只要讓JavaScript設置圖像，如果你真的只是顯示圖像，你不需要處理）

來源

2013-03-04 19:36:06

嗯，這是很好的知道我試圖做的事情不會奏效。但是，草圖不只是顯示圖像，這確實是愚蠢的。以下是我想要做的兩個示例： http://graphic-interaction.com/mfa-thesis/testing-group02/tangible-decay-02.html http：// graphic-interaction。 com/mfa-thesis/testing-group02/pro-ex-07.php 在第一個中，我有一組畫布，每個畫布都使用畫布繪製圖像。在第二種情況下，單個畫布可以播放圖像，然後將其保存回我的服務器，以便下一個人再次打開。 – anthonyCarton 2013-03-05 02:12:38

啊，我明白了。整齊。是的，這可能是在頁面上多次加載同一草圖的一個很好的例子。 – 2013-03-05 13:15:31

嗯，我還沒有投票，但我會，我看了整個互聯網的答案。如果您知道任何快速生成60多份sketch.pde副本（不進行每個副本/粘貼和編輯）的好方法，那麼每個人只能在加載的圖像名稱上有所不同，我的下一個人會是這樣。我知道一個小蟒蛇，我正在考慮嘗試。 – anthonyCarton 2013-03-05 20:15:39

使用Processing.js：我可以使用只有一個數據處理源sketch.pde的多個畫布嗎？

回答

相關問題