使用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的多个画布吗？

回答

相关问题