Deep Zoom в Ajax - возможно? Есть какие-нибудь примеры?

У меня есть идея реализовать интерфейс типа глубокого масштабирования, размещенный в браузере, для данных спортивной тренировки (скорость, расстояние, частота пульса и т. Д.). Однако вместо изображений я действительно хочу увеличить иерархию информации. Например, начальное отображение будет содержать сетку лет - например, наведите указатель мыши на 2008 год и вращайте колесико мыши (или щелкните), чтобы увеличить этот год, но во время увеличения я хочу, чтобы 2008 год исчез и был заменен календарем. месяцев. Снова увеличьте масштаб месяца, и месяцы заменяются календарем месяцев, увеличьте масштаб дня, и вы наконец увидите диаграмму с нанесенными на нее данными обучения. Все время как-то выделялись бы только даты с фактическими данными.

У меня вопрос, возможно ли это вообще, и видел ли кто-нибудь уже примеры этого. Я предполагаю, что большую часть времени следующий уровень информации может быть кэширован в браузере (фактически, поскольку это основано на календаре, я могу вычислить большую часть этого и кэшировать даты, которые будут выделены). Я также мог бы увеличить масштаб. в пустую диаграмму, пока поток Ajax извлекает данные для отображения.

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


person Phil    schedule 11.05.2009    source источник


Ответы (5)


Для Deep Zoom на изображениях в JavaScript / Ajax есть отличная библиотека Seadragon Ajax от Microsoft Live Labs. .

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

person Daniel Gasienica    schedule 18.06.2009
comment
Не для OpenZoom, но есть форк Seadragon Ajax с открытым исходным кодом под названием OpenSeadragon: github.com/openseadragon/openseadragon - person Daniel Gasienica; 11.04.2014

Вы, вероятно, не смогли бы добиться очень плавного масштабирования с помощью интерфейса типа javascript / ajax, но интерфейс масштабирования был бы возможен. В прагматичной книге по ajax есть отличная глава о реализации клона карт Google. Нет необходимости ограничивать технику масштабированием мозаичных изображений. Элементы изображения могут так же легко быть любым HTML-кодом, который вы хотите. Эффект затухания может быть применен к операции масштабирования, поэтому, когда вы перемещаетесь вверх и вниз по слою, вы получаете что-то похожее на то, что вы описали. Я рекомендую взять книгу (это книга для прагматичных программистов, поэтому доступна дешевая и сразу загружаемая PDF-версия. Прочтите главу, подумайте о методах, а затем посмотрите, считаете ли вы, что это практично для вашего видения. Удачи.

person Sean O Donnell    schedule 12.05.2009

Seadragon Ajax продолжает развиваться и теперь называется OpenSeadragon:

http://openseadragon.github.io/

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

https://github.com/iangilman/zooming

person iangilman    schedule 14.05.2013

Я не верю, что ajax или dhtml - хорошие решения для того, чего вы пытаетесь достичь. Думаю, лучше всего подойдут flash / flex или silverlight.

person KevMo    schedule 12.05.2009

Посмотрите на эффект «масштабирования» в jQuery. Вот ссылка. Я сам ею не пользовался, но, возможно, делай что хочешь. Вам придется в нужный момент поменять какой-то контент на другой, иначе ваш html станет слишком большим.

person jrb    schedule 12.05.2009