Как создать пазл из изображения с помощью javascript

Question

Я погуглил, но не нашел хорошего ответа.В частности, я хочу научиться:

• нарезать изображение на изогнутые кусочки
• , чтобы создавать отдельные объекты из этих кусков (я предполагаю, что мне нужно это собрать заново)

спасибо.

Answer 1

Эта головоломка состоит из нескольких частей.:)

Первая часть - это SVG и его холст.Это то, что вам нужно нарисовать, потому что иначе вы не сможете сделать изогнутый кусок из рисунка.В стандартном HTML / CSS возможны только прямоугольники.

Второй фрагмент - это алгоритм генерации фрагментов из рисунка.Google должен помочь вам в этом, если вы не можете понять это самостоятельно (хотя это не кажется очень сложным).

Остальное должно быть простым.

Добавлено: Быстрый Поиск в Google дал именно такую ​​головоломку в первом результате.Проверьте источник этого .

Answer 2

Я предполагаю, что изображение, которое вы хотите распилить на части, является растровым изображением с разрешением, которое вы будете использовать для частей головоломки, назовите это / picture /. Кроме того, я предполагаю, что у вас есть края, вдоль которых вы хотите видеть второе растровое изображение с такими же размерами, назовите это / raster /. Тогда ваша проблема сводится к определению всех связанных областей в растре. Каждый пиксель растра помечается идентификатором фрагмента мозаики, которому он принадлежит, первоначально «none», -1 или что-то еще. Затем ваш алгоритм сканирует все пиксели в растре, пропуская пиксели, которые уже принадлежат фрагменту. Для каждого неназначенного фрагмента выполняется заливка, «окрашивая» пиксели идентификатором фрагментов (например, номером). Во втором сканировании, после выделения изображения для каждого фрагмента, вы добавляете соответствующие пиксели изображения к фрагменту. В качестве части вашего первого прохода вы можете сохранить для каждой фигуры ограничивающую рамку. Это позволяет вам распределять изображения по частям по размерам.

Вам необходимо подходящее соглашение для работы с пикселями границы: например, граничные пиксели справа принадлежат фигуре, если они имеют одинаковую x-позицию, но находятся выше, они также принадлежат фигуре.