Советы по созданию Google Maps-подобного интерфейса

Question

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

Может кто-нибудь дать мне рекомендации относительно того, какую технологию использовать? Будет ли это хорошо подходит для простого HTML? HTML 5 Canvas? или SVG? Какие-нибудь конкретные библиотеки JS рекомендовать или что-то еще полностью?

Я бы хотел избежать флэш и Java. И совместимость браузера это плюс, но не самый важный фактор. Например, я думаю, что, возможно, было бы хорошо требовать Chrome Frame для более старых IE.

Любые идеи / советы будут оценены.

Answer 1

Несколько мыслей:

• Используйте OpenLayers UI со стратегией " fixed ", чтобы загружать векторную графику для вашей платы одновременно. (Вероятно, это слишком большой вес, но поставляется с панорамированием и совместимостью с IE.)

• Используйте Raphael , чтобы построить свою доску в SVG, используя RaphaelZPD для панорамирования. RaphaelZPD не является кросс-браузерным (хотя Raphael и есть), поэтому вам потребуется Chrome Frame для совместимости с IE. Это было бы довольно легко, я думаю.

• Используйте чистый SVG для вашей доски, используйте SVGpan для панорамирования. Здесь также требуется Chrome Frame, хотя вы можете использовать SVGweb, если хотите. Вы можете рисовать свои доски прямо в Inkscape, очищать SVG и добавлять любые идентификаторы, которые вам нужны в XML (SVG - это XML под капотом), и взаимодействовать с доской с помощью jQuerySVG, если хотите, или создавать сценарии взаимодействия вручную. Я упоминал, что CSS работает с SVG? Я думаю, это ваша лучшая ставка.

• Я не могу придумать преимущества использования Canvas, если у вас не было лотов анимации или растровых изображений. SVG гораздо более прозрачен в том, как он работает - он скрыт от XML и, когда он отображается на странице, становится узлами DOM, которыми можно легко манипулировать в современных браузерах.

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

Answer 2

Если вы хотите полностью контролировать свою среду разработки, вы можете создать свою собственную веб-платформу рендеринга.Я думаю, что вы можете использовать HTML canvas 5 в качестве интерфейса с браузером.

Вы можете легко реализовать перетаскивание, панорамирование и масштабирование с помощью HTML canvas.Этот подход очень похож на разработку игр во многих платформах. Здесь пример использования HTML canvas 5 для интерфейса, который поддерживает панорамирование, перетаскивание и масштабирование.

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

Answer 3

Если вы не возражаете против плиток, я бы рекомендовал проверить Polymaps"Библиотека JavaScript для мозаичных изображений и векторных карт с использованием SVG" Вероятно, можно взять некоторые части оттуда для панорамирования и масштабирования.