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

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

Пространство XML имен

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

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

Теги XML

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

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

  • Корневой элемент <agg:params> может включать множество элементов <agg:param>.

  • Каждый элемент <agg:param> может включать несколько элементов <agg:state> с элементами <agg:param>.

Agg:params

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

Agg:param

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

  • содержит информацию о свойстве компонента,

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

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

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

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

Атрибут

Тип

Описание

name

строка

Имя свойства компонента.

description

строка

Описание свойства в редакторе свойств.

type

строка

Текстовый код для типа свойства. Поддерживаются следующие типы: I (целое), F (плавающее), S (строка), C (цвет), state, level.

min

плавающее

Минимальное ограничение значения свойства для числовых типов или более низкое ограничение значения параметра для типа level.

max

плавающее

Максимальное ограничение значения свойства для числовых типов или более высокое ограничение значения параметра для типа level.

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

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

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

Атрибут

Тип

Описание

ids

String

Список идентификаторов элементов документа SVG, разделенные запятой. Изменения параметров влияют на элементы с данными идентификаторами.

classes

String

Список разделенных запятой классов CSS. Изменения параметров влияют на элементы с данными CSS.

attributes

String

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

cssAttributes

String

Разделенные запятыми CSS атрибуты. CSS атрибуты будут переписаны новыми значениями при изменении.

pattern

String

Шаблон строки, содержащий "{0}". Используется для трансформации значения свойства в строку документа, заменяя {0} на значение.

forceRepaint

Boolean

Данная кнопка-флажок контролирует политику изменения цвета рисунка SVG при изменении параметра. Если установлена на false, цвет изменяется частично на основе определения измененных областей (быстро). Если установлена на true, цвет рисунка меняется полностью при каждом изменении параметра (медленно). В определенных случаях обработчик рисунка SVG не может правильно управлять изменениями динамического документа (например, изменением масок обрезки), поэтому цвет рисунка должен быть изменен полностью. Принудительная перезаливка приведет к снижению динамической производительности SVG.

Значение по умолчанию -- false.

animation *

"play/stop"

Включает/отключает анимацию элементов с определенными идентификаторами и классами.

value *

String

Устанавливает значение для атрибута с определенными идентификаторами и классами.

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

Agg:state

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

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

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

Атрибут

Тип

Описание

name

String

Имя состояния.

description

String

Описание состояния в редакторе свойств.

Примеры

Стиль

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

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

Когда изображение загружается в редактора SVG, оно будет содержать свойство компонента. Каждый раз, когда 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 приведены в Библиотеке символов.