Управление svg-рисунками

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

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

Чтобы создать пустой виджет, дважды кликните по узлу Виджеты () в системном дереве или выберите во всплывающем меню действие Создать виджет (). В открывшемся окне установите свойство Имя виджета - svgManipulation и Описание виджета - SVG Manipulation, кликните OK. Это переместит Вас к редактору виджетов с пустым шаблоном виджета.

Во-первых, установите свойство компоновки Корневой панели на абсолютную - так Вы не будете ограничены в разметке компонентов. Мы используем корневую панель для простоты, но Вы можете также использовать в качестве контейнера и отдельную панель.

Перетащите компонент Векторный рисунок ()из палитры компонентов в корневую панель рабочей формы виджета:

Теперь загрузите файл с изображением вентилятора из библиотеки: нажмите кнопку Выбрать (Choose) в свойстве файла SVG, а затем найдите и откройте нужный файл в появившемся диалоговом окне.

Установите положение компонента и его размер: координата X и координата Y равны 0, ширина и высота - 500. Таким образом, вентилятор будет занимать все пространство виджета.

Перетащите еще один компонент Векторного рисунка ()из палитры компонентов в рабочую форму. Затем загрузите фал изображения кнопки из библиотеки, как описано ранее. Измените размер и поместите его в левый нижний угол: установите значение координаты X и координаты Y равным 410, свойства ширины и высоты - 90. А теперь перед нами вентилятор с кнопкой:

Давайте для простоты идентификации переименуем наши компоненты. Правой кнопкой мыши кликните по компоненту (или по имени компонента в Дереве ресурсов) и выберите в появившемся меню элемент Переименовать.

Присвойте имена компонентам fan и button.

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

Свойство Цель уже установлено на form/fan:state. Кликните по кнопке [...] внутри поля Выражение, чтобы отредактировать текст выражения интерактивно в Конструкторе выражений. Во-первых, найдите свойство Состояние вентилятора в дереве Компонентов редактора выражений, дважды кликните по нему, чтобы вставить ссылку. Во-вторых, добавьте == 'on' ? 'off' : 'on' к выражению, кликните OK, чтобы разрешить диалоговое окно Конструктора выражений. Итоговое выражение вернет инверсию значения свойства Состояния вентилятора после его вычисления.

Затем переключитесь в поле Активатор и кликните [...], чтобы открыть диалоговое окно Активатор. Выберите вкладку Событие виджета, а затем установите поле Контекст как button , а Событие как mousePressed. Кликните OK для подтверждения. Этот активатор будет запускать привязку при каждом клике по кнопке.

Убедитесь, что свойство Событие отмечено в диалоговом окне Привязать свойство. Удостоверьтесь, что все свойства имеют такие же значения, что и на скриншоте, и кликните OK:

А теперь давайте разрешим кнопке загораться зеленым светом, когда вентилятор включен. Правой кнопкой мыши щелкните по свойству кнопки Цвет в Редакторе свойств и выберите во всплывающем меню элемент Привязать свойство. Установите свойства привязки аналогичным образом, как описано ранее, так, чтобы все значения соответствовали значениям на скриншоте (см ниже) и кликните OK:

Выражение включает функцию цвета, которая возвращает цвет с назначенными значениями красного, зеленого и синего цветов. Чтобы вставить функции в выражение, можно использовать диалоговое окно Выборщик функций, которое открывается кнопкой Функции в диалоговом окне Конструктора выражений:

Кликните Готово (), чтобы завершить редактирование и сохранить виджет. В Системном дереве должен появиться контекст виджета  () по управлению SVG. Чтобы увидеть виджет в действии, выберите во всплывающем меню действие Запустить виджет ().

А теперь можно нажать на кнопку и увидеть, как работает вентилятор.

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