Векторное изображение

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

Публичные переменные (Свойства)

[?]

Компонент Векторное изображение имеет следующие основные свойства и группы свойств, общие для всех компонентов:

Имя, Дополнительные свойства, Свойства контейнера, Стиль контейнера, Прелоадер, События, Привязки.

Шаблон SVG

Указывает изображение SVG, которое будет отображаться компонентом.

Переменная:

drawing

Записи:

1

Формат записи:

Имя поля

Тип поля

Описание поля

imageType

integer

Тип. Тип источника данных. Определяет, будет ли изображение встроено в инструментальную панель в виде блока двоичных данных или загружено по URL.

Поддерживаемые значения:

  • Data Block

  • URL

  • Ссылка на шаблон.

imageData

Data Block

Данные шаблона. Содержимое шаблона SVG, предоставляемое в виде Data Block. Используется когда type = Data Block.

imageUrl

String

URL шаблона. URL-адрес шаблона SVG. Используется когда Type = URL.

imageTemplateReference

String

Ссылка на шаблон. Ссылка на шаблон SVG. Используется когда Type = Template Reference. Значение должно быть вычислено как строка (имя шаблона) или Data Block (содержимое SVG).

Поведение при клонировании и разрешении ссылок описано в разделе Редактор SVG.

Пользовательские свойства

Определяет пользовательские свойства изображения SVG (параметры на уровне шаблона). Каждая запись определяет пользовательское свойство, доступное для экземпляра векторного рисунка. На пользовательское свойство можно ссылаться в выражениях как {Name} (например {valveTagPrefix} в getVariable(dc(), {valveTagPrefix} + "_angle")). valveTagPrefix — это пример имени пользовательского параметра, используемого шаблоном SVG «Valve». Это не встроенное поле векторного изображения.

Название переменной:

customProperties

Записи:

0…Не ограничено количество

Формат записи:

Имя поля

Тип поля

Описание поля

name

String

Имя. Имя пользовательского свойства. Используется в выражениях как {name} (например {valveTagPrefix}).

format

Data Table

Формат. Определение формата пользовательского свойства.

description

String

Описание. Удобное для чтения описание настраиваемого свойства, отображаемое в редакторе.

help

String

Справка. Подробный текст справки (всплывающая подсказка) для настраиваемого свойства, отображаемого в редакторе.

Свойства SVG

Определяет свойства изображения SVG. Каждая запись указывает атрибут SVG или свойство стиля, которое применяется к соответствующим элементам SVG (по ID, имени класса или шаблону) и настраивается в таблице «Свойства SVG» редактора.

Название переменной:

svgProperties

Записи:

1

Формат записи:

Имя поля

Тип поля

Описание поля

description

String

Описание. Удобное для чтения человеком описание свойства SVG, показанное в редакторе.

type

String

Тип. Тип свойства SVG.

cssAttributes

String

Атрибуты CSS. Имя (имена) атрибута (атрибутов) CSS, на которые влияет данное свойство.

className

String

Имя класса. Фильтр имени класса SVG, используемый для выбора целевых элементов.

pattern

String

Шаблон. Шаблон, используемый для сопоставления целевых элементов.

attributes

String

Атрибуты. Имена атрибутов SVG, на которые влияет данное свойство.

ids

String

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

minimum

Число

Минимальное значение. Минимальное допустимое значение для этого свойства.

maximum

Число

Максимум. Максимальное допустимое значение для этого свойства.

states

Data Table

Состояния. Эта вложенная таблица данных определяет поведение свойства в различных состояниях жизненных циклов.

bindings

Data Table

Привязки. Конфигурация привязок для свойства SVG. Описания полей и использование привязок см. в разделе Редактор SVG.

Масштаб

Увеличивает или уменьшает размер изображения в окне компонента.

Переменная:

scale

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

scale

Float

Масштаб

Режим интерактивности

Позволяет пользователю изменить положение изображения в рамке просмотра.

Переменная:

enableInteractions

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

enableInteractions

Boolean

Режим интерактивности

Анимированный

Позволяет отображать анимированные элементы SVG-изображений.

Переменная:

animated

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

animated

Boolean

Анимированный

Сохранять пропорции

Указывает, как элемент с viewBox с заданным соотношением сторон должен вписываться в область просмотра с другим соотношением сторон. Если переменная имеет значение true, свойства Выравнивание по горизонтали и Выравнивание по вертикали будут применяться, когда viewBox и область просмотра имеют разное соотношение сторон.

Переменная:

preserveAspectRatio

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

preserveAspectRatio

Boolean

Сохранять пропорции

Выравнивание по горизонтали

Указывает, как изображение должно быть выровнено по горизонтали, когда viewBox и область просмотра имеют разное соотношение сторон.

Переменная:

horizontalAlign

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

horizontalAlign

String

Выравнивание по горизонтали

Выравнивание по вертикали

Указывает, как изображение должно быть выровнено по вертикали, когда viewBox и viewport имеют разные соотношения сторон.

Переменная:

verticalAlign

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

verticalAlign

String

Выравнивание по вертикали

Максимизировать

Позволяет применять свойства Процент отступа по X и Процент отступа по Y к соответствующим значениям окна просмотра SVG в тех случаях, когда размер окна просмотра увеличивается или уменьшается.

Переменная:

maximize

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

maximize

Boolean

Максимизировать

Процент отступа по X

Когда свойство Максимизировать включено, элемент SVG занимает все пустое пространство в viewBox. Свойство marginPercentX управляет процентным отступом SVG-элементов по оси X. Все изменения происходят в свойстве viewBox.

Переменная:

marginPercentX

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

marginPercentX

Плавающий

Процент отступа по X

Процент отступа по Y

Когда свойство Максимизировать включено, элемент SVG занимает все пустое пространство в viewBox. Свойство marginPercentY управляет процентным отступом SVG-элементов по оси Y. Все изменения происходят в свойстве viewBox.

Переменная:

marginPercentY

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

marginPercentY

Плавающий

Процент отступа по Y

Ширина холста

Ширина холста в пикселях для SVG-изображения. Значение устанавливается при загрузке SVG-файла и может быть изменено. До загрузки файла значение 0 означает, что горизонтальное растяжение не ограничено и ширина холста будет равна ширине области просмотра.

Переменная:

canvasWidth

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

canvasWidth

Integer

Ширина

Высота холста

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

Переменная:

canvasHeight

Записи:

1

Формат записи:

Поле

Тип поля

Описание поля

canvasHeight

Integer

Высота

Контекст по умолчанию

Контекст по умолчанию определяет контекст, используемый при вычислении привязок шаблона. Это особенно полезно при обращении к переменным устройствам. Он ведет себя так же, как Контекст по умолчанию для вложенной панели.

Название переменной:

defaultContext

Записи:

1

Формат записи:

Имя поля

Тип поля

Описание поля

defaultContext

String

Контекст по умолчанию

Was this page helpful?