Редактор SVG

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цель: form/vectorDrawing1:ellipse2_stroke Выражение: color(255,0,0) Активатор: form/vectorDrawing1:mouseClicked@​ При нажатии на компонент цвет обводки эллипса динамически изменяется в зависимости от соответствующей привязки данных.

Привязки инструментальной панели
Привязки инструментальной панели — это стандартные привязки компонентов на уровне инструментальной панели (т.е. обычные привязки, которые связывают свойства компонентов с другими объектами/событиями инструментальной панели).

Для обеспечения предсказуемости редактирования редактор привязок различает эти две группы. В пользовательском интерфейсе привязок используется специальный селектор типа привязки для Векторного изображения, где это применимо (Шаблон или Инструментальная панель).

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

• Привязка шаблонов

• Привязки инструментальной панели

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

Если Векторное изображение настроен на ссылку на шаблон (т.е., он не является «владельцем» редактируемого шаблона, а лишь указывает на него), пользовательский интерфейс не позволяет добавлять или редактировать привязки для свойств SVG этого векторного изображения. В этом режиме значок привязки и действия привязки отключены, чтобы предотвратить создание пользователями привязок, которые были бы несовместимы с моделью владения шаблоном, на который ссылается изображение.

Это ограничение гарантирует, что:

• привязки шаблонов 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!