Processing.js图片数组无法正常显示 [英] Processing.js array of pictures not showing properly

问题描述

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

I am trying to take picture path data from my database and show it on the processing sketch like so this is Javascript file:

<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代码：

and this is my Processing.js code here:

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个不同的图像呢？

The problem is that when I run the sketch, it shows me one image more and only the last element of the array. If I have 5 elements, in the skatch area, I have 6 same images with the fifth element of the array. How can I fix this and to see 5 different images instead?

推荐答案

以这种方式思考：你只有一个 img 变量，所以你只展示一张图片！

Think about it this way: you only have one img variable, so you're only ever showing a single image!

仔细看看你的循环：

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

您正在循环列表并从中获取图像，但您只是不断地反复设置 img 变量。在此循环结束时， img 将等于列表中的最后一个图像。

You're looping through list and getting the images from it, but you're just constantly setting the img variable over and over again. At the end of this loop, img will just equal the last image in the list.

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

Instead of using a single img variable, you probably want to use an array or an ArrayList. Here's a basic start:

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图片数组无法正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！