Как получить бесконечно большой холст? - PullRequest
8 голосов
/ 28 августа 2011

Я создаю веб-приложение, которое использует холст для рисования.Я хотел бы иметь бесконечно большое пространство для рисования (вы можете прокручивать сколько угодно в любом направлении) и сохранять данные / изображения в базе данных.

Что-то было сделано аналогично тому, что здесь: http://wordsquared.com/,, где чем больше людей в нее играют, тем больше она становится.

Я знаю, что для этого потребуется каким-то образом разделить изображения на части, сохранить их в БД, а затем кодировать только те, которые находятся в области просмотра.Как это и бесконечная прокрутка будут выполнены / с чего мне начать?

Ответы [ 2 ]

5 голосов
/ 28 августа 2011

Это немного нетрадиционный метод, но мне показалось, что он потенциально (теоретически, с неограниченным пространством хранения) бесконечен.

Вам нужно будет сохранить загруженный в данный момент кусок доски, заданный в виде уникального идентификатора. Куски и их данные должны быть в таблице со следующими столбцами:

  • Идентификатор чанка
  • Данные чанка
  • ID чанка на север
  • ID юга
  • ID Востока
  • ID Запада

Вам нужно сделать холст перетаскиваемым, возможно, с помощью jQuery или аналогичного ( этот вопрос содержит информацию об этом).

Теперь создайте прослушиватель событий для перетаскиваемого холста и отслеживайте расстояние, на которое он перемещается. Если после отпускания холст не изменился на другой фрагмент, ничего не делать.

Если холст покинул текущий блок, используйте сохраненный идентификатор, чтобы найти следующий блок для загрузки. Если идентификатор равен 0, предположим, что фрагмент еще не существует, и создайте его. В противном случае загрузите чанк, заменив существующий чанк. Установите холст обратно по центру.

С достаточно длинными идентификаторами и достаточным пространством для хранения это даст вам бесконечный холст, так как система координат не используется. Это также позволяет обернуть края или создать червоточины.

Как это реализовать, я не совсем уверен, но вам нужно только отследить, как далеко холст был перемещен. Google Maps делает нечто подобное, поэтому я посмотрю, как они справляются с этим (я сделаю это в ближайшее время и посмотрю, смогу ли я добавить некоторые подробности реализации к этому ответу).

Возможно, это не самый практичный или самый простой метод, но было забавно придумать.

Редактировать: Я считаю, что это соответствует основной функциональности: http://candrews.net/blog/2010/10/introducing-sprymap/ Это легкая перетаскиваемая карта JavaScript. Тогда вам просто нужно отследить, как далеко.

0 голосов
/ 31 декабря 2016

Я сделал библиотеку для работы с этим, которая называется TiledCanvas Он предоставляет интерфейсы для масштабирования и перемещения. И рисовать в бесконечном пространстве, используя все apis холста.

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

https://github.com/Squarific/TiledCanvas

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...