如何将动态参数传递给.pde文件

Question

class Shape包含两个方法drawCircle()和drawTriangle().每个函数都使用不同的参数集.目前,我通过直接调用pde文件来调用它.如果我必须控制传递给draw函数的参数,如何直接从HTML文件传递这些参数？1)Example.html有(当前版本)

<script src="processing-1.0.0.min.js"></script> 
<canvas data-processing-sources="example.pde"></canvas>

2)Example.pde有

    class Shape { 
         void drawCircle(intx, int y, int radius) { 
              ellipse(x, y, radius, radius); 
        } 
         void drawTriangle(int x1, int y1, int x2, int y2, int x3, int 
y3) { 
              rect(x1, y1, x2, y2, x3, y3); 
        } 
    } 
    Shape shape = new Shape(); 
   shape.drawCircle(10, 40, 70); 

我希望在我的HTML文件中做这样的事情,这样我就可以将所有函数移动到一个单独的文件中并用不同的参数调用它们来绘制不同的形状(非常类似于你在Java中的表现)A.html

<script> 
Shape shape = new Shape(); 
shape.drawCircle(10, 10, 3); 
</script> 

B.html

<script> 
Shape shape = new Shape(); 
shape.drawTriangle(30, 75, 58, 20, 86, 75); 
</script>

2)Iam使用Example2.pde了

void setup()  {  
  size(200,200);  
  background(125);  
  fill(255); 
}

  void rectangle(int x1, int y1, int x2, int y2) {
          rect(x1, y1, x2, y2);
}

我的Example2.html有

var processingInstance; processingInstance.rectangle(30,20,55,55);

但这不起作用.如何从html动态传递这些参数.

Answer 1

如果您只需要在加载时传入这些变量，那么在 JS 中创建配置对象然后在处理代码中访问这些对象似乎会更容易。请参阅从处理中访问 Javascript 对象。

例如，您的 JS 可能如下所示：

var shapes = [
    {shape:"circle", x:10, y:150, radius: 70}
];

在您的处理代码中，您可以访问该shapes变量：

void draw() {
    shape = new Shape();
    fill(0);
    for (int i=0; i<shapes.length; i++) {
        if (shapes[i].shape=="circle") {
            shape.drawCircle(shapes[i].x, shapes[i].y, shapes[i].radius);
        }
        // etc  
    }
}

我的印象是，这比尝试从 javascript 实际控制处理实例要容易得多。