Масштабирование пользовательского интерфейса на холсте HTML
Случилось так, что я столкнулся с задачей создания ZUI (масштабирующего пользовательского интерфейса) на HTML Canvas. Примерами таких интерфейсов являются Deep Zoom и Seadragon от Microsoft.
Я пытаюсь найти некоторые библиотеки, которые позволили бы мне создавать ZUI без самостоятельного написания (хотя я уже сделал это для Mac и iOS).
Ключевые особенности, которые должна иметь библиотека:
- Иметь какие-то "взгляды" в качестве базовых элементов и располагать их иерархически
- Нарисуйте векторную графику, текст и изображения (необязательно) в представлениях
- Увеличение до 200x раз
- События мыши, которые обрабатываются представлениями (вверх / вниз, перемещение, прокрутка)
Любые предложения (даже если они не соответствуют вышеуказанным условиям) будут очень приветствоваться, так как я ничего не нашел о ZUI на холсте.
4 ответа
Вы смотрели на Zoomooz?
Zoomooz - это плагин jQuery для увеличения масштаба элементов веб-страницы. Его можно использовать для создания слайд-шоу в стиле Prezi, а также для увеличения изображений или других деталей.
http://janne.aukia.com/zoomooz
Вы можете использовать его для увеличения любого элемента DOM. Работает лучше с SVG, чем с Canvas, поскольку Canvas будет отображать пиксели при увеличении.
Это может помочь вам начать: https://github.com/florianguenther/zui53
ZUI53 - это библиотека JavaScript для создания мощных веб-интерфейсов Zoomable User Interface (ZUI) с новыми технологиями, такими как HTML5 и CSS3.
Существует также OpenSeadragon, но я не уверен, что он использует Canvas.
Вы смотрели на Piccolo2d, кажется, отвечает большинству ваших требований. Взгляните на видео от Geneaquilts, которое показывает, как они использовали его для там интерфейса.
Существует также Taaspace.js, который использует HTML и CSS3, но не Canvas. Taaspace пытается абстрагироваться от всех различных методов ввода, делая его совместимым, например, с устройствами с сенсорным экраном. Вы можете проверить этот пример приложения.