javascript — массив картинок Processing.js не отображается должным образом

Question

javascript — массив картинок Processing.js не отображается должным образом

Я пытаюсь взять данные о пути к изображению из моей базы данных и показать их на эскизе обработки, например, это файл 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 разных изображений?

0

arrays javascript jquery php processing.js

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Подумайте об этом так: у вас есть только один 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]);
}
}

0