Processing.js图片数组无法正常显示

我正在尝试从我的数据库中获取图片路径数据并在处理草图上显示它,因此这是Javascript文件:

 function send() { function setPath(d) { var s = d; var processingInstance; if (!processingInstance) { processingInstance = Processing.getInstanceById('canvas'); } processingInstance.change(s); } var variable = 2; $.ajax({ method: "POST", tupe: "POST", url: "take.php", data: ({val: variable}), success: function (data) { $('#msg').html(data); setPath(data); }, }); } 

这是PHP文件:

  $value) { echo " $value"; } // echo $im; } ?> 

这是我的Processing.js代码:

 String pic ; PImage img; int x; int y; int pad = 10; int bs = 50; String[] list = new String[0]; void setup(){ size(500,500); background(150); //img = loadImage(pic); } void draw(){ for (int i = 0; i < list.length ; i++){ x = pad + (bs+pad)*i; y = pad; image(img,x,y,bs,bs); } } void change(String val){ list = split(val," "); for(int i = 0; i <list.length; i++){ pic = list[i]; img = loadImage(pic); println(pic); } } 

问题是,当我运行草图时,它会向我显示一个图像,并且只显示数组的最后一个元素。 如果我有5个元素,在skatch区域,我有6个相同的图像与数组的第五个元素。 如何修复此问题并查看5个不同的图像?

想一想:你只有一个img变量,所以你只能展示一个图像!

仔细看看你的循环:

  for(int i = 0; i  

你循环遍历list并从中获取图像,但你只是不断地反复设置img变量。 在这个循环结束时, img将等于列表中的最后一个图像。

您可能希望使用数组或ArrayList ,而不是使用单个img变量。 这是一个基本的开始:

 PImage[] images; void draw(){ for (int i = 0; i < images.length ; i++){ x = pad + (bs+pad)*i; y = pad; image(images[i],x,y,bs,bs); } } void change(String val){ list = split(val," "); images = new PImage[list.length]; for(int i = 0; i < list.length; i++){ images[i] = loadImage(list[i]); } }