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图片数组无法正常显示

1 个答案: