Использование Raphael.js для рисования элементов интерфейса
Знайте о любых примерах использования Raphaeljs для создания элементов пользовательского интерфейса для веб-приложения. Контейнеры / окна форм, элементы управления с вкладками и т. Д. Какие-либо предложения при этом (например, кэширование сгенерированного SVG / RVML для повторного использования?)?
2 ответа
Простой пример - использование иконок, сгенерированных Raphael.
Взгляните на эти 130 икон, созданных самим мистером Рафаилом. Они обеспечивают очень хорошее масштабирование, как и все другие виджеты пользовательского интерфейса, сделанные с SVG.
Одним из наиболее важных методов будет .node(), так что вы можете прикрепить обработчики к связанным элементам. С .node() было бы легко заставить Рафаэля взаимодействовать с некоторыми другими библиотеками, которые более ориентированы на пользовательский интерфейс.
У Рафаэля даже есть несколько встроенных обработчиков событий.
Я работаю над чем-то подобным для приложения бизнес-аналитики. У меня есть класс контроллера / фабрики, который кэширует сгенерированные svg/vml на уровне панели, а не на уровне виджета. На самом деле в этом нет ничего волшебного, просто поднять методы метода Dift / LowerDash, которые проверяют, существует ли указанная панель, создают ее, если она не существует, и скрывают предыдущую.
Если вы даже думаете, что можете логически сгруппировать некоторые элементы, сделайте для них набор. Сначала я боялся падения производительности, но если вы посмотрите на источник g.raphael, даже разработчик Raphael использует их много.
Каждый созданный мной индикатор имеет набор фона и набор переднего плана (который состоит из циферблата, индикаторов и текста), оба из которых включаются в набор переднего плана своего родительского виджета, который, в свою очередь, включается в набор переднего плана. всей приборной панели. Таким образом, я могу скрыть всю панель мониторинга и отобразить другую с двумя вызовами методов, сохраняя при этом детальный контроль внутри объектов панели мониторинга. Интерфейс с вкладками будет работать так же.