Создание динамических векторных рисунков

Платформа SberMobile позволяет простым способом сделать неподвижное изображение подвижным и интерактивным. Вы можете добавлять пользовательские параметры к рисунку. Когда SVG рисунок с пользовательскими параметрами загружается в компонент Векторное изображение, параметры отображаются в качестве свойств компонента в отдельной вкладке в Редакторе свойств Редактора виджетов. Их изменение может динамически изменять различные свойства рисунка: цвет, толщину линий, угол вращения, включение/отключение анимации и т.д.

Все пользовательские теги имеют отдельную область имен: agg. Поэтому она должна быть объявлена в заголовке документа SVG для корректного формирования документа:

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:agg="http://www.example.com" ... >

Струтура объявления пользовательских параметров следующая:

• Должен быть один корневой узел <agg:params>, включающий все другие объявления.
• Корневой элемент <agg:params> может включать множество элементов <agg:param>.
• Каждый элемент <agg:param> может включать несколько элементов <agg:state> с элементами <agg:param>.

Является корневым контейнером для всех пользовательских объявлений. В документе должен присутствовать только один тег <agg:params>.

Имеет атрибут, который:

• содержит информацию о свойстве компонента,
• определяет правила применения значения свойства к элементам документа SVG.

Когда тег расположен в корневом узле <agg:params>, он создается в качестве свойства компонента: как применять пользовательские свойства и правила. Когда тег расположен в корневом узле <agg:state>, применяются только правила, свойства компонента не создаются (см. AGG:STATES).

Атрибуты используются для определения свойств компонента:

Тип Level подразумевает, что свойство компонента является целым числом (Integer) в пределе [0..100]. Каждое значение свойства в данном диапазоне пропорционально транслируется в диапазон [min..max] во время применения к документу. Числа min и max определяются соответствующими атрибутами параметра. Имейте в виду, что значение min может быть больше значения max.

Тип State необходим для применения заданных изменений к документу (см. AGG:STATES).

Атрибуты, определяющие правила изменений SVG:

Атрибуты Animation и value используются только тогда, когда <agg:param> определяет состояние. Value содержит постоянное строковое значение, которое применяется к документу при установлении необходимого состояния параметра компонента. Animation начинает/останавливает анимацию с данным id во время установки необходимого состояния.

Состояния используются для применения к документу некоторых определенных заранее изменений (состояний). Например, для включения/выключения вращения вентилятора. Параметр Состояние нескалярный и отображается в Редакторе свойств в виде раскрывающегося списка с заданными опциями.

Он используется для установки множества значений для нескольких элементов DOM, когда применяется состояние. Принцип определения состояния очень прост: создайте <agg:param> с типом "state" и перечислите в нем состояния при помощи <agg:state>. Каждый тег <agg:state> может иметь множество тегов <agg:param/>, определяющих, как DOM должен измениться при применении состояния.

Он имеет следующие параметры:

Вы можете контролировать стиль элементов документа SVG, изменяя их атрибуты CSS. Чтобы изменить цвет различных частей рисунка, нужно использовать следующие объявления параметров:

<agg:params>

<agg:param name="color" description="Color" type="C" cssAttributes="fill" classes="mainColor"/>

</agg:params>

Когда изображение загружается в Редактор виджетов, оно будет содержать свойство компонента. Каждый раз, когда Color получает новое значение, обработчик изображения будет находить все элементы документа, у которых класс является mainColor и устанавливать новое значение цвета для атрибута CSS fill. Это приведет к изменению цвета частей изображения.

Чтобы сделать SVG более удобным для настройки, быстрой загрузки и обслуживания, вы можете использовать CSS (каскадные таблицы стилей) в том же файле. См. раздел Стилевое оформление с CSS в статье Спецификация W3C SVG.

Предположим, что документ SVG содержит элемент, представляющий узел с  id knob. Применение вращения в точке (61.542, 61.792) повернет узел. Чтобы создать параметр для вращения на определенный угол, вы можете написать следующее:

<agg:params>

<agg:parameter name="angle" description="Angle" type="I" ids="knob" attributes="translation" pattern="rotate({0} 61.542 61.792)"/>

</agg:params>

Это описывает один параметр SVG Angle с типом Integer, который будет отображаться в качестве свойства компонента. Если параметр установлен на 45, тогда атрибут элемента DOM knob будет установлен на rotate(45 61.542 61.792) и узел повернется на 45 градусов.

Предположим, что уровень жидкости в документе SVG изображения реактора зависит от значения атрибута y тега <clipPath id="clipPathId"...>:, когда y равен 66.9, реактор полон, когда y равен 660, реактор пуст. Таким образом, для контроля уровня мы должны создать параметр с типом level:

<agg:params>

<agg:param name="level" description="Level" type="level" attributes="y" min="660" max="66" ids="clipPathId" forceRepaint="true"/>

</agg:params>

Данный параметр создает свойство компонента с типом Integer с ограничениями от 0 до 100. Атрибуты min="660" и max="66" определяют диапазон атрибута y. Каждый раз, когда свойство компонента приобретает новое значение, оно пропорционально переводится из диапазона [0, 100] в [600, 66] и атрибут y элемента clipPathId устанавливается на данное переведенное значение. Если свойство Level установлено на 50, то y будет установлено на 297. Если свойство Level установлено на 100, то y будет установлено на 66.

Флажок forceRepaint используется для полного изменения цвета изображения при каждом изменении свойства Level. Поскольку динамические изменения маски обрезки не поддерживаются, вы можете получить неожиданные результаты, не изменив полностью цвет изображения.

Для управления состояниями изображения, таких как "блок открыт" или "выключатель включен", вы можете использовать параметр state. Например, чтобы создать динамический тумблер с левой и правой позициями, вы можете создать документ SVG с двумя группами элементов. Одну для левой позиции выключателя, другую -- для правой. Итак, чтобы контролировать состояния тумблера, вам необходимо следить за видимостью групп. Определить параметр для переключения состояния можно следующим образом:

<agg:params>

<agg:param name="state" description="State" type="state">

       <agg:state name="left" description="Left">

               <agg:param attributes="visibility" ids="switch-left" value="visible"/>

               <agg:param attributes="visibility" ids="switch-right" value="hidden"/>

       </agg:state>

       <agg:state name="right" description="Right">

               <agg:param attributes="visibility" ids="switch-left" value="hidden"/>

               <agg:param attributes="visibility" ids="switch-right" value="visible"/>

       </agg:state>

</agg:param>

</agg:params>

Это определяет свойство компонента State с двумя значениями: Left и Right. Если State установлено на Left, атрибут visibility элемента DOM switch-left получает значение visible, атрибут visibility элемента DOM switch-right получает "скрытое" значение. Если State установлено на Right, switch-left становится скрытым, а switch-right становится visible.

Допустим, у вас есть изображение вентилятора со следующей анимацией:

<animateTransform id="rotate" attributeName="transform" attributeType="XML" type="rotate" from="0 45 45" to="360 45 45" begin="indefinite" dur="10s" repeatCount="indefinite"/>

Для управления анимацией вы можете задать параметр состояния:

<agg:params>

<agg:param name="state" description="State" type="state">

       <agg:state name="on" description="On">

               <agg:param animation="play" ids="rotate"/>

       </agg:state>

       <agg:state name="off" description="Off">

               <agg:param animation="stop" ids="rotate"/>

       </agg:state>

</agg:param>

</agg:params>

Это определяет свойство компонента State с двумя значениями: On и Off . Когда оно получает значение On, запускается анимация rotate. Когда значение установлено на Off, анимация rotate прекращается.

Другие примеры использования пользовательских параметров SVG приведены в Библиотеке символов.