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

Question

Shape 类包含两个方法 drawCircle() 和 drawTriangle()。每个函数采用不同的参数集。目前，我调用这个直接调用pde文件。如何从一个传递这些参数如果我必须控制传递给的参数，则直接使用 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) 我正在使用 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 有

变种处理实例； processingInstance.rectangle(30, 20, 55, 55);

但这行不通。如何从 html 动态传递这些参数。

Answer 1

您可以使用 Canvas 元素的数据属性将数据传递给您的处理实例。

例如，如果您希望 myvar.value 在实例中结束:

<canvas data-processing-myvar="value" data-processing-sources="/assets/mysketch.pde"></canvas>

您可以通过调用在草图中访问此数据:

var myVarInSketch = this.param('myvar');