Попытка создать единое изображение карты из плиток с использованием элемента холста

У меня есть куча фрагментов карты png, которые я пытаюсь сшить вместе на элементе холста.

jsFiddle

Я делаю плитку 10x10 со счетчиком от 0 до 99 (id), чтобы отслеживать, где я нахожусь. Это строка, которая строит изображение:

ctx.drawImage(this, id%10*imgWidth, Math.floor(id/10)*imgHeight, imgWidth, imgHeight);

Где id — число от 0 до 99, imgWidth — ширина каждой плитки, а imgHeight — высота каждой плитки.

Я достаточно уверен, что это должно работать, но, похоже, на холсте отображается только одна растянутая плитка вместо всех 100. Когда я проверяю консоль на предмет того, что было загружено, изображения имеют правильную форму и содержимое для каждой плитки. Просто кажется, что они не были помещены на холст. У кого-нибудь есть какие-либо идеи?


javascript canvas drawimage
person SimpleProgrammer    schedule 12.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Одна из причин не использовать jQuery с холстом:

$('canvas').width(imgWidth*10).height(imgHeight*10);

:) поскольку это относится к размеру элемента, а не к растровому изображению. Я бы предложил использовать вместо этого:

myCanvas.width = imgWidth*10;
myCanvas.height = imgHeight*10;

Измененная скрипта

person Community    schedule 12.03.2017
comment
Это мелочи, не так ли? Кровавый гений. Теперь мне просто нужно выяснить, почему эти плитки не выстраиваются должным образом. - person SimpleProgrammer; 12.03.2017
comment
@MowgliB точно есть, и его труднее заметить. Остальное я не проверял, но мое первоначальное предположение - это порядок загрузки; изображения не обязательно заканчиваются в том же порядке, в котором они были запрошены, но, поскольку счетчик безжалостно увеличивается (?), Независимо от этого, входящие изображения размещаются там, где находится текущая позиция. - person ; 12.03.2017
comment
Поправьте меня, если я ошибаюсь, но поскольку я использую событие загрузки для вызова следующей плитки, порядок должен сохраняться. Я думаю, что это может быть вызвано проекцией, которую я использую. Поскольку он сферический, использование линейной функции для определения координат следующего тайла, вероятно, не лучший способ сделать это. Я просто надеялся, что расстояния, которые я преодолевал, были достаточно малы, чтобы это не было заметно. - person SimpleProgrammer; 12.03.2017
comment
Или, если подумать, я загружаю строки в обратном порядке. Ха-ха. - person SimpleProgrammer; 12.03.2017
comment
А, теперь я вижу, что вы запускаете следующую загрузку из обработчика, это будет более синхронно, да, вы правы. Некоторые люди все равно склонны читать карты наоборот :p - person ; 12.03.2017