Как сделать эффект бесконечного холста?

Question

[Kuusandr]

Нашел способ, канвас увеличивается в обработчике события скроллирования на величину скрола. Нет ли какого нибудь другого варианта поизящнее?

Answer 1

[Sumor]

Берёте канвас размером больше экрана, вплоть до двукратной ширины и высоты.
При скролировании перемещаете канвас. Как только вы приблизитесь к границе - добавьте с той стороны новый канвас такого же размера. Перемещайте оба канваса пока первый не скроется из виду и вы его можете спокойно удалить.
При таком подходе достаточно двух канвасов, если у вас перемещается по одной оси, и четырёх, если перемещение по двум осям.

Answer 2

[Алексей Павлов]

Можно представить, что у гуглокарт - бесконечный холст. Но это не гигантская картинка, это куча маленьких картинок. Просто потом нужно дорисовать нужные кусочки после скролла.

1. Делаем двумерный массив картинок (или список списков картинок, чтобы количество можно было легко изменять). Размер картинок может быть любым, как больше размера канваса, так и меньше. Например, размер одной картинки 100x100
   
2. Помещаем картинки на холст. Например, размер холста 500x500, то помещаем 25 картинок из массива. Возможно, дополнить по краям ещё по одной картинке, то есть, сделать размер холста 600x600 (или даже 700x700), но показывать только центр
   
3. Отключить стандартные скроллбары холста, а скролл сделать самому - перетаскиванием мышки (можно - правой кнопкой, или настроить и скролл мышки). Потому что скроллбар показывает, где сейчас находится окно просмотра в общем документе, а в бесконечном холсте это не имеет смысла
   
4. При прокрутке холста проверять, дошли ли до части, где нет картинки, тогда убрать дальний ряд или столбец и дорисовать новый ряд или столбец из массива.
   
5. При дорисовке картинок из массива, сменить скролл холста - вернуть холст в центр, как раз там будут нужные картинки после удаления ряда картинок