使用Processing.js:我可以有多个画布只有一个数据处理源sketch.pde

Using Processing.js: Can I have multiple canvases with only one data-processing-source sketch.pde?

本文关键字：有一个 数据处理 pde sketch js Processing 我可以 使用      更新时间：2023-09-26

使用Processing.js，我想知道我想做的是否可能。我看过Pomax的教程，processing . JS JS开发者页面的快速开始，PJS谷歌组，在这里，我似乎找不到这个问题的答案，"你能有多个画布，这样他们都使用相同的处理草图(在我的例子中，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); 
}}

只需在页面中添加一百万个具有相同data-processing-sources属性的canvas元素，这样它们就会加载相同的文件。process .js会根据你的要求构建尽可能多的草图，它并不关心每个草图文件是否相同=)

(请注意，您所描述的，一个草图实例渲染到多个画布上，给每个不同的图像，不是草图的工作方式。草图被绑在画布上作为其绘图面。然而，你可以创建一百万个"从属"草图，它们的唯一职责是在JavaScript的指示下绘制图像，并让主草图告诉JavaScript告诉从属草图来绘制。注意，这是非常非常愚蠢的。让JavaScript设置图像，如果只是显示图像就不需要Processing了)

相关文章：