Масштабирование пользовательского интерфейса на холсте HTML - PullRequest
6 голосов
/ 25 августа 2011

Случилось так, что я столкнулся с задачей создания ZUI (масштабируемого пользовательского интерфейса) на HTML Canvas.Примерами таких интерфейсов являются Deep Zoom и Microsoft Seadragon.

Я пытаюсь найти некоторые библиотеки, которые позволили бы мне создавать ZUI, не создавая его самостоятельно с нуля (хотя я уже сделал это для Mac иiOS).


Ключевые функции, которые должна иметь библиотека:

  1. Имеют некоторые «виды» в качестве базовых элементов и упорядочивают их иерархически
  2. Рисованиевекторная графика, текст и изображения (необязательно) в представлениях
  3. Увеличение до 200 раз
  4. События мыши, которые обрабатываются представлениями (вверх / вниз, перемещение, прокрутка)

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

Ответы [ 4 ]

5 голосов
/ 07 января 2013

Это может помочь вам начать: https://github.com/florianguenther/zui53

ZUI53 - библиотека JavaScript для создания мощного веб-интерфейса Zoomable Пользовательские интерфейсы (ZUI) с новыми технологиями, такими как HTML5 и CSS3.

Существует также OpenSeadragon , но я не уверен, использует ли он Canvas.

4 голосов
/ 25 февраля 2013

Вы уже видели Zoomooz?

Zoomooz - это плагин jQuery для увеличения масштаба элементов веб-страницы.Его можно использовать для создания слайд-шоу в стиле Prezi, а также для увеличения изображений или других деталей.

http://janne.aukia.com/zoomooz

Вы можете использовать его для увеличения любого элемента DOM.Работает лучше с SVG, чем с Canvas, поскольку Canvas будет отображать пиксели при увеличении.

2 голосов
/ 24 октября 2011

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

0 голосов
/ 31 января 2014

Существует также Taaspace.js , который использует HTML и CSS3, но не Canvas.Taaspace пытается абстрагироваться от всех различных методов ввода, делая его совместимым, например, с устройствами с сенсорным экраном.Вы можете проверить этот пример приложения.

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