как сделать миниатюру навигации холста на странице HTML

Question

Я недавно построил сетевой график, используя vis.js. Обычно сеть слишком сложна, чтобы на нее смотреть, просто глядя на картину в целом. Пользователь моей веб-страницы может нуждаться в увеличении.

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

Любой совет? Я много гуглил, но ничего не нашел. Спасибо.

Answer 1

Это звучит несколько прямолинейно, поэтому вот как я могу это сделать:

• добавьте элемент «карта», где вы будете показывать объект (предположительно, он должен зависать над некоторым нижним углом области графика)
• добавить элемент ("где я"), например, с полупрозрачной рамкой и прозрачным фоном, чтобы показать, какая часть отображается сейчас. Размер каждой границы должен быть рассчитан так, чтобы он охватывал всю карту. Или он может иметь обычные границы, и его позиция должна быть определена
• научитесь запускать пересчет при увеличении или перемещении объекта. Вы, вероятно, будете использовать обработчики событий графа , по крайней мере для zoom и dragging или dragEnd или может быть release. Запустите тот же обработчик после рендеринга вашего графика, чтобы инициировать «карту»
• выяснить, как сделать «скриншот» всего объекта (и решить, что это за объект… куда поместить границы?) Из сетевого холста (может быть, снова отобразить его внутри элемента?), Добавить это к элементу "map" под элементом "где я" (через обработчик события)

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