Я сталкиваюсь с проблемами при попытке потянуть большой 2D массив изображений на холст. Используя отдельную программу, я беру один большой файл изображения и повреждаю его меньшие, универсальные части. Я использую 2D массив для представления этой "сетки" изображений, и идеально когда я присваиваю src каждого элемента в сетке, то изображение было бы оттянуто к его надлежащей точке на холсте однажды его готовое. Однако мой код не работает.
var grid = new Array()
/*grid is set to be a 2D array of 'totalRows' rows and 'totalCols' columns*/
/*In the following code, pieceWidth and pieceHeight are the respective height/widths
of each of the smaller 'pieces' of the main image. X and Y are the coordinates on
the canvas that each image will be drawn at. All of the images are located in the
same directory (The src's are set to http://localhost/etc), and each individual
filename is in the form of name(row*totalRows + col).png, ex, traversing the 2D
array left to right top to bottom would give image1.png, image2.png, etc*/
for (var row = 0; row < totalRows; row++)
{
for (var col = 0; col < totalCols; col++)
{
grid[row][col] = new Image();
var x = col * pieceWidth;
var y = row * pieceHeight;
grid[row][col].onload = function () {ctx.drawImage(grid[row][col], x, y);};
grid[row][col].src = "oldimagename" + ((row * totalRows) + col) + ".png";
}
}
Я попытался выполнить этот код в Opera, Firefox, Chrome и Safari. onload события не стреляют вообще в Opera, Chrome и Safari (я поместил предупреждение в функции onload, это никогда не подходило). В Firefox, только ПЕРВОМ изображении (сетка [0] [0]) onload запущенное событие. Однако я заметил, что, если я поместил предупреждение прямо ПОСЛЕ ТОГО, КАК я установил src элемента тока, каждое onload событие в Firefox инициировано, и все изображение оттянуто. Идеально я хотел бы, чтобы это работало во всех 4 браузерах (я принимаю работу привычки IE, потому что она не поддерживает Холсты), но я просто не знаю то, что продолжается. Любая справка/вход ценится, Спасибо!
Я думаю, что проблема в том, что вы не помещаете свои переменные в закрытие. Измените эту строку:
grid[row][col].onload = function () {ctx.drawImage(grid[row][col], x, y);};
на
grid[row][col].onload = function () {window.alert('row:' + row + ' col:' + col);};
И что вы увидите, так это то, что ваши алерты возвращают одно и то же значение для row и col при каждом вызове. Вам нужно обернуть эти переменные в замыкание, чтобы ваша функция работала со значениями, а не со ссылками:
var drawCanvasImage = function(ctx,grid,row,col,x,y) {
return function() {
ctx.drawImage(grid[row][col], x, y);
}
}
Затем сделайте:
grid[row][col].onload = drawCanvasImage(ctx,grid,row,col,x,y);
Этот пример страницы работает у меня в Firefox и Chrome.