Использование Raphael.js для рисования элементов интерфейса - PullRequest
2 голосов
/ 12 сентября 2010

Знайте о любых примерах использования Raphaeljs для создания элементов пользовательского интерфейса. для веб-приложения. Форма контейнеров / окон, вкладок и т. Д. Любая предложения при этом (например, кэширование сгенерированного SVG / RVML для повторное использование?)

Ответы [ 2 ]

4 голосов
/ 07 октября 2010

Простой пример - использование иконок, сгенерированных Raphael.

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

Одним из наиболее важных методов для использования будет .node(), так что вы можете прикрепить обработчики к связанным элементам. С .node() было бы легко заставить Рафаэля взаимодействовать с некоторыми другими библиотеками, которые более ориентированы на пользовательский интерфейс.

У Рафаэля даже есть несколько встроенных обработчиков событий сейчас.

1 голос
/ 20 сентября 2010

Я работаю над чем-то в этом направлении для приложения бизнес-аналитики.У меня есть класс контроллера / фабрики, который кэширует сгенерированный svg / vml на уровне панели, а не на уровне виджета.В этом нет никакой магии, на самом деле, просто поднять методыDash / lowerDash, которые проверяют, существует ли указанная панель, создают ее, если ее нет, и скрывают предыдущую.

Если вы даже думаете что вы можете логически сгруппировать некоторые элементы, сделать для них набор.Сначала я боялся падения производительности, но если вы посмотрите на исходный код g.raphael, даже разработчик Raphael использует их много.

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

...