Question

使用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); 
}}

Answer 1

只需向页面添加一百万个画布元素，所有这些元素都具有相同的data-processing-sources属性，因此它们都会加载相同的文件。 Processing.js将根据您的要求构建尽可能多的草图，并不关心每个草图文件是否相同=）

（注意你所描述的，一个草图实例渲染到多个画布上，给每个画布赋予不同的图像，而不是草图的工作方式。草图与画布相关联作为其绘图表面。但是，你可以赚一百万“奴隶“草图，其唯一的责任是从JavaScript指示绘制图像，并使主草图告诉JavaScript告诉奴隶草图绘制。请注意，这是非常非常愚蠢的。只是让JavaScript设置图像，你不需要处理，如果你真的只是显示图像）

使用Processing.js：我可以拥有多个只有一个数据处理源sketch.pde的画布吗？

1 个答案: