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）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

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

例如，如果您希望myvar.value以实例结束：

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

您可以通过调用以下方式访问草图中的数据：

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

Answer 2

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

例如，您的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实际控制处理实例要容易得多。

Answer 3

为了达到你想要的效果，你可能想尝试：

// Assuming: <canvas id="internal" data-processing-sources="internal.pde">
instance = Processing.getInstanceById('internal');
instance.internalFunction(); // Call to internalFunction() inside internal.pde

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

3 个答案: