Редактор SVG

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

Панель инструментов появляется при выборе редактора свойств компонента Векторное изображение. Доступны инструменты и действия для создания, редактирования и выравнивания элементов изображения SVG.

Значок	Название	Подробности
	Выбор	Выбирает элемент изображения. Если элемент входит в группу, будет выбрана группа. Удерживайте Shift при щелчке, чтобы добавить элементы или группы к выделению. Перетащите выбранный элемент для перемещения. При удерживании Shift движение ограничено по горизонтали или вертикали. Масштабируйте или поворачивайте элемент, перетаскивая точки рамки выделения. Удерживайте Shift при масштабировании, чтобы сохранить пропорции. При выборе элемента или группы в редактор свойств открываются их свойства. Примечание. Если выбранный элемент входит в группу, привязки или изменения свойств применяются ко всей группе. Это ожидаемое поведение и оно отличается от «Направленного выбора»
	Направленный выбор	Выбирает отдельный элемент, даже если он входит в группу. Отображает точки привязки и контрольные точки для редактирования. Редактируйте элемент, изменяя его точки привязки и контрольные точки. Примечание. «Направленный выбор» всегда применяется к конкретному элементу и гарантирует, что привязки и изменения свойств затрагивают только его, а не группу
	Карандаш	Рисует произвольные линии с автоматически создаваемыми точками привязки
	Прямоугольник	Рисует прямоугольники
	Эллипс	Рисует эллипсы
	Ручка	Рисует ломаные (многоугольные) пути. Каждый щелчок добавляет опорную точку. Продолжение существующей ломаной: Подведите курсор к одному из концов открытого пути, дождитесь курсора «продолжить» и щёлкните — рисование продолжится от этого конца. Исходный ID элемента сохраняется. Замыкание пути: Во время рисования щёлкните рядом с начальной точкой, чтобы замкнуть путь. Добавление/удаление опорных точек (быстрый режим): Удерживайте Alt, чтобы временно включить режим добавления/удаления: Alt + щелчок по сегменту → вставить опорную точку в ближайшем месте на сегменте. Alt + щелчок по существующей точке → удалить эту опорную точку. Отпустите Alt, чтобы вернуться к обычному режиму «Перо».
	Текст	Добавляет текстовое поле
	Линия	Рисует прямые линии с двумя точками привязки
	Отразить по вертикали	Отражает выбранный элемент или элементы по вертикали
	Отразить по горизонтали	Отражает выбранный элемент или элементы по горизонтали
	Удалить	Удаляет выбранный элемент или группу
	Выравнивание по левой кромке	Выравнивает левые границы всех выбранных элементов и групп
	Выравнивание по правой кромке	Выравнивает правые границы всех выбранных элементов и групп
	Выравнивать вдоль вертикальной оси	Совмещает вертикальные оси всех выбранных элементов и групп
	Выравнивание по верней кромке	Выравнивает верхние границы всех выбранных элементов и групп
	Выравнивание по нижней кромке	Выравнивает нижние границы всех выбранных элементов и групп
	Выравнивать вдоль горизонтальной оси	Совмещает горизонтальные оси всех выбранных элементов и групп

Примечание. Helper Tool — это временный режим, который активируется при удерживании клавиши Ctrl.

• Если активен инструмент рисования (Прямоугольник, Ручка, Эллипс), Helper Tool работает как инструмент Выбор, позволяя выделять и изменять элементы без переключения инструмента.

• Если активен инструмент Выбор, Helper Tool работает как инструмент Направленный выбор, позволяя редактировать отдельные элементы напрямую.

После отпускания клавиши Ctrl редактор возвращается к ранее активному инструменту. Отдельной кнопки на панели инструментов для Helper Tool нет — он вызывается только с клавиатуры. Такой механизм предотвращает конфликты между рисованием и редактированием и обеспечивает единое поведение во всех инструментах.

Контекстное меню предлагает дополнительные опции, специфичные для текущего выбранного элемента или элементов, группы или групп элементов.

Примечание: В данной версии компоненты SVG содержат внутренний элемент agg-params, необходимый для обработки привязок.
Если удалить SVG и загрузить его заново, существующие привязки могут перестать работать, даже если идентификаторы элементов не изменились.
Чтобы обеспечить корректную работу привязок после редактирования, всегда сохраняйте изменённый компонент SVG как новый, прежде чем загружать его повторно.
Привязки сохраняются в RootPanelComponent и могут потребовать ручной корректировки в случае несоответствий.

Данное ограничение устранено начиная с версии 6.4.

Ссылки на свойства элементов определяются именем элемента и именем свойства, разделенными символом подчеркивания(_).

Например, предположим, что компонент векторной графики с именем vectorDrawing0 содержит элемент с именем rect0, и ссылка должна указывать на свойство элемента Заливка, которое называется fill. Чтобы указать значение этого свойства, используется следующая ссылка:

^{form/vectorDrawing0:rect0_fill}

Повторим, что эта ссылка состоит из следующих частей:

• form/ - это схема, указывающая на компонент приборной панели.

• vectorDrawing0, как было сказано выше, - это имя компонента приборной панели.

• rect0_fill - имя элемента и имя свойства, разделенные знаком подчеркивания.

Следующие горячие клавиши можно использовать при выборе одного или нескольких элементов.

Редактор SVG поддерживает временное переключение между инструментами с помощью клавиши Ctrl. Эта функция позволяет пользователям редактировать существующие элементы без необходимости вручную менять активный инструмент.

Когда активен инструмент рисования (например, прямоугольник, перо, эллипс):

• Щелчок по холсту создает новые фигуры.

• Существующие фигуры нельзя выделить или переместить.

• Это предотвращает случайное изменение фигур в режиме рисования.

Отпускание клавиши Ctrl восстанавливает ранее активный инструмент.

1. Активируйте инструмент Прямоугольник.

2. Удерживайте клавишу Ctrl, чтобы временно переключиться в режим Селектор.

3. Выделите и переместите существующую фигуру.

4. Отпустите клавишу Ctrl, чтобы продолжить рисование.

• Курсор динамически изменяется, отражая активный временный инструмент.

• Применяется ко всем поддерживаемым инструментам для создания фигур в редакторе.

• Эта функция повышает эффективность рабочего процесса, не требуя переключения между инструментами.

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

Основные особенности:

• Векторное изображение ведёт себя как компонент-контейнер: все вложенные элементы (метки, диаграммы, поля ввода и т. д.) располагаются в его пределах.

• Вложенные компоненты следуют той же логике позиционирования и компоновки, что и Абсолютное позиционирование.

• Вы можете размещать другие компоненты Векторное изображение внутри родительского Векторного изображения — они будут вести себя как часть родительского контейнера.

• При редактировании вложенного компонента Векторное изображение он рассматривается как дочерний слой внешнего контейнера.

• Позволяет создавать сложные панели управления HMI, используя единый редактор SVG в качестве основы для компоновки.

• Устраняет проблемы компоновки и взаимодействия, ранее возникающие из-за вложенности.

• Упрощает разработку многослойных векторных пользовательских интерфейсов.

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

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

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

Каждая запись в таблице свойств SVG теперь может включать следующие поля:

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

Пример привязки шаблона:

Цель: form/vectorDrawing1:ellipse2_stroke
Выражение: color(255,0,0)
Активатор: form/vectorDrawing1:mouseClicked@​

При нажатии на компонент цвет обводки эллипса динамически изменяется в зависимости от соответствующей привязки данных.

Редактор SVG поддерживает пользовательские свойства на уровне шаблона, которые позволяют передавать динамические параметры в компоненты, основанные на шаблонах.

Пользовательские свойства хранятся в SVG XML-файле и ведут себя аналогично пользовательским свойствам инструментальной панели.

Пример:

Property name: valveTagPrefix  
Type: String

Используется в выражении:

getVariable(dc(), {valveTagPrefix} + "_angle")

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

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

Он ведет себя так же, как и контекст по умолчанию в компонентах Вложенная панель.

Помимо ссылок на статические SVG-шаблоны, свойство SVG Template > Type поддерживает тип источника Expression.
Это позволяет определить динамическое выражение, которое возвращает либо строку (имя шаблона), либо блок данных с SVG-содержимым.

Пример:

getVariable("templatesContext", "valveSvgTemplate")

Такой подход позволяет динамически повторно использовать логику шаблона в нескольких компонентах Векторное изображение.

Свойство SVG Template > Type также поддерживает новую опцию: Ссылка на SVG-компонент.

При выборе этой опции становится доступен селектор сущностей. Он позволяет выбрать существующий SVG-компонент из дерева контекстов.

Компонент Векторное изображение становится экземпляром выбранного SVG. Он наследует все agg:params, привязки шаблонов и структурные определения от оригинала.

Это обеспечивает удобный и масштабируемый способ повторного использования сложных SVG-шаблонов на инструментальной панели — без ручного дублирования привязок или свойств.

При клонировании компонента Векторное изображение, использующего шаблон, система автоматически обновляет все внутренние ссылки в привязках — такие как Выражение, Условие и Активатор.

Пример:

Клонирование компонента обновляет ссылки, например:

Original reference: form/vectorDrawing1:barrel1:color
Cloned reference: form/vectorDrawing2:barrel1:color

Это исключает ручное переименование и обеспечивает правильное поведение привязки для каждого экземпляра.

Устаревшие привязки, созданные до появления этой функции, по-прежнему работают, но они не отображаются на панели свойств SVG. Только привязки на основе шаблонов поддерживают встроенное редактирование и связывание.

При клонировании векторного изображения, для которого в поле Шаблон SVG → Тип установлено значение Блок данных (любым методом), система изменяет источник шаблона клона, чтобы избежать дублирования встроенных данных SVG.

В частности:

• тип шаблона SVG клонированного компонента автоматически изменяется на Выражение,

• выражение шаблона автоматически устанавливается на выражение, ссылающееся на шаблон исходного компонента в той же инструментальной панели (например, выражение, указывающее на исходную переменную изображения/шаблона, такую ​​как {originalSvg:svgFile$imageData} или эквивалентную ссылку, поддерживаемую в вашей среде).

Такое поведение предотвращает появление нескольких идентичных встроенных шаблонов на инструментальной панели после клонирования и делает повторное использование шаблонов явным и удобным для сопровождения.

Was this page helpful?

Tell us more

Send

Thank you!