Манипулирование SVG-изображениями

В AggreGate реализована полная поддержка изображений SVG (Scalable Vector Graphics). Она включает в себя такие функции, как прозрачность, произвольная геометрия, эффекты фильтров (тени, эффекты освещения и т. д.) и анимация. Любое SVG-изображение можно масштабировать, поворачивать и переворачивать без потери качества. Специальная Библиотека символов предоставляет обширную коллекцию SVG-изображений с дополнительной встроенной функцией. Эти специальные изображения обладают динамическими свойствами для изменения различных визуальных аспектов: цвета, толщины линий, анимации и т. д.

Текущая статья покажет, как манипулировать SVG-изображениями и использовать их для создания интерактивных пользовательских интерфейсов. С помощью этого руководства вы сможете создать приборную панель с двумя простыми SVG-компонентами: вентилятором и индикатором.

Создание Инструментальной панели

Чтобы создать новую инструментальную панель, щелкните правой кнопкой мыши на Инструментальных панелях (

В контекстном меню узла SVG Manipulation в дереве системы выберите Редактировать панель инструментов, чтобы начать редактирование.

Активатор

Для поля Активатор нажмите кнопку [...], чтобы открыть диалог Активатор. Выберите вкладку События компонента (1) и выберите событие Щелчок мыши (2). Подтвердите выбор нажатием кнопки OK. Этот активатор будет запускать привязку при каждом щелчке на корневой панели.

Анимация индикатора

Сейчас давайте сделаем так, чтобы при включении вентилятора кнопка загоралась зеленым цветом. Добавьте еще одну строку в таблицу Привязки и установите свойства привязки, используя значения из примера:

  • Цель form/Indicator:color

  • Выражение расширенного поиска {form/fan:state} == 'on' ? color(255,0,0) :color(0,255,0)

  • Активатор form/:mouseClicked@

Выражение включает в себя функцию color, которая возвращает цвет с заданными значениями красного, зеленого и синего. Для вставки функций в выражения можно использовать диалог Выбор функции, открываемый кнопкой Функции диалога Выражение расширенного поиска. Здесь мы выбрали категорию Обработка Цвета.

Сохранение и запуск Инструментальной панели

Нажмите Сохранить (1), чтобы сохранить свою работу, а чтобы увидеть ее в действии, выберите Запустить Инструментальную панель (2).

Контекст приборной панели SVG Manipulation также должен появиться в Системном дереве, а запустить ее можно из контекстного меню:

Текущая Инструментальная панель должна выглядеть примерно так:

В этом руководстве вы узнали, как создавать элементы приборной панели с динамическими SVG-изображениями. Сейчас вы можете комбинировать элементы управления и использовать их для создания сложных пользовательских интерфейсов.

Was this page helpful?