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 将等于列表中的最后一张图像。

您可能不想使用单个 img 变量，而是使用数组或 ArrayList。这是一个基本的开始：

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]);
    }
}

Processing.js 一组图片显示不正确

Processing.js array of pictures not showing properly

javascript

php

arrays

jquery

processing.js