Processing.js 图片数组未正确显示

Question

我正在尝试从我的数据库中获取图片路径数据并将其显示在处理草图上，就像这样的 Javascript 文件：

<script type="text/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);
                },
            });
        }</script>

这是 PHP 文件：

<?php

$con = mysqli_connect('localhost', 'Admin', 'xkmpfg3t', 'test');

if (!$con) {
   echo mysqli_errno($con);
}

if ($_POST) {
    $temp = $_POST['val'];
    $query = mysqli_query($con, "SELECT* FROM `pictures` WHERE `user_id` = $temp");
    if (!$query) {
        mysqli_errno($con);
    }
    $im = array();
    $i = 0;
    $img;
    while ($image = mysqli_fetch_assoc($query)) {
        $img = $image['picture_name'];
        $im[$i] = "$img";
        $i += 1;
    }
    foreach ($im as $i => $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 个不同的图像？

Answer 1

这样想：你只有一个 img 变量，所以你只显示一个图像！

仔细看看你的循环：

 for(int i = 0; i <list.length; i++){    
        pic = list[i];
        img = loadImage(pic);
        println(pic);
    }

您正在循环通过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]);
    }
}