html5 Холст Выберите область и масштаб

Question

Я нахожусь в середине переориентации интерактивной карты тепла с svg на холст в javascript. Мне было интересно, есть ли у кого-нибудь идеи о том, как разрешить кому-то выбрать область и увеличить ее в этой области с помощью html5 canvas и js.

Большое спасибо, Том

Answer 1

Отказ от ответственности: Потому что вы не предоставили никакого кода я собираюсь придерживаться стратегии здесь :)

Способ 1: DIY

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

Корпус 1: Размер вашей ячейки увеличивается, и вы просто увеличиваете размер ячейки по коэффициенту масштабирования и снимаете область, которая выходит за пределы того, что выбрано пользователем.

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

Как только вы определили одну из двух стратегий, реализация на JavaScript на самом деле довольно проста.

1. Вы подключаетесь к мероприятию drag-event. и позволить пользователям нарисовать прямоугольник, чтобы показать им область ссылки, в которую они масштабируются.

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

3. Теперь, используя коэффициент масштабирования вы генерировать новый образ, основанный на case1 или Вариант 2 в зависимости от которой вы идете с

4. Наконец заменить существующее изображение старого.

5. Viola! Увеличить !!

Способ 2: Использовать библиотеку!

Используйте потрясающую библиотеку, например OpenLayers 3, и просто загрузите в нее свою тепловую карту. Вот Heatmap Example, сделанный в OpenLayers 3. Zoom pan теперь приходят БЕСПЛАТНО!

Надеюсь, это поможет.