Стили обводки управляют внешним видом контуров фигур и линий. Настраивайте толщину, цвет, штриховку и окончания линий для создания чётких, профессиональных диаграмм.

Основные свойства обводки

Цвет обводки

Цвет контура фигуры.

Чтобы изменить цвет обводки:

  1. Выделите фигуру
  2. Откройте панель Инспектора
  3. Найдите раздел Stroke
  4. Нажмите на цветовую ячейку обводки
  5. Выберите цвет в палитре

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

Толщина обводки

Управление толщиной контура.

Чтобы настроить толщину обводки:

  1. В разделе Stroke Инспектора
  2. Используйте ползунок Width или поле ввода
  3. Диапазон обычно от 0 (без обводки) до 20+ пикселей
  4. Типичные значения:
    • 1-2px: Тонкие контуры, детализированные диаграммы
    • 3-4px: Стандартные контуры, большинство диаграмм
    • 5-8px: Жирные контуры, акцент
    • 10+px: Очень жирные, декоративные или для презентаций

Толщина обводки

Без обводки

Полное удаление обводки:

  1. В разделе Stroke
  2. Установите толщину в 0 или нажмите No Stroke
  3. Контур фигуры исчезает

Полезно для:

  • Залитых фигур без границ
  • Бесшовных компоновок фигур
  • Минималистичных стилей диаграмм

Штриховые узоры

Создание пунктирных или точечных линий вместо сплошных обводок.

Предустановленные узоры

Diagrammix3 включает типичные штриховые узоры:

  • Solid — Непрерывная линия (по умолчанию)
  • Dashed — Регулярные штрихи с промежутками
  • Dotted — Маленькие точки с промежутками
  • Dash-Dot — Чередующиеся штрихи и точки
  • Long Dash — Более длинные штрихи, широкие промежутки

Чтобы применить штриховой узор:

  1. Выделите фигуру или коннектор
  2. В разделе Stroke Инспектора
  3. Нажмите на выпадающий список Dash Pattern
  4. Выберите узор

Штриховые узоры

Пользовательские штриховые узоры

Для расширенного контроля создайте пользовательские штриховые узоры:

  1. Выберите Custom из меню штриховых узоров
  2. Введите длины штрихов и промежутков (в пикселях)
  3. Формат узора: [штрих, промежуток, штрих, промежуток, ...]
  4. Пример: [10, 5, 2, 5] создаёт узор «длинный штрих, промежуток, точка, промежуток»

Применение штриховых узоров

  • Пунктирные линии: Обозначают необязательные или будущие элементы, временные соединения, границы
  • Точечные линии: Показывают скрытые или внутренние связи, направляющие, менее важные соединения
  • Штрих-точка: Зависимости UML, архитектурные границы, альтернативные потоки
  • Сплошные линии: Стандартные, основные соединения и фигуры

Окончания линий

Управление отрисовкой концов линий (преимущественно для открытых контуров и коннекторов).

Стили окончаний

Стыковое окончание (Butt Cap)

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

Круглое окончание (Round Cap)

  • Линия заканчивается полукруглым колпачком
  • Немного выступает за конечную точку
  • Более мягкий, дружелюбный вид

Квадратное окончание (Square Cap)

  • Линия заканчивается квадратным колпачком
  • Немного выступает за конечную точку (на половину толщины обводки)
  • Точный, архитектурный вид

Чтобы изменить окончания линий:

  1. Выделите коннектор или открытый контур
  2. В разделе Stroke
  3. Нажмите на выпадающий список Line Cap
  4. Выберите: Butt, Round или Square

Стили окончаний линий

Соединения линий

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

Стили соединений

Острое соединение (Miter Join)

  • Создаёт острые, заострённые углы
  • По умолчанию для большинства фигур
  • Лучше всего подходит для: прямоугольников, многоугольников, угловатых дизайнов

Круглое соединение (Round Join)

  • Создаёт скруглённые углы в местах встречи сегментов
  • Более мягкий вид
  • Лучше всего подходит для: органичных фигур, дружелюбных диаграмм

Скошенное соединение (Bevel Join)

  • Создаёт срезанные углы
  • Отсекает острый кончик
  • Лучше всего подходит для: технических диаграмм, когда острое соединение было бы слишком резким

Чтобы изменить соединения линий:

  1. Выделите фигуру
  2. В разделе Stroke
  3. Нажмите на выпадающий список Line Join
  4. Выберите: Miter, Round или Bevel

Примечание: Соединение линий наиболее заметно при острых углах с толстыми обводками.

Стили соединений линий

Непрозрачность обводки

Сделайте обводку полупрозрачной:

  1. В разделе Stroke
  2. Настройте ползунок Opacity (0-100%)
  3. 0% = невидимая обводка
  4. 100% = полностью непрозрачная

Независимая непрозрачность обводки позволяет:

  • Нежные контуры на ярких заливках
  • «Призрачные» фигуры на фоне
  • Многослойные диаграммы с перекрывающимися элементами

Цветовые схемы и обводки

Привязка обводок к цветовым схемам:

  1. В разделе Stroke
  2. Нажмите на выпадающий список Scheme
  3. Выберите роль цвета (Border, Accent и т.д.)
  4. Обводка обновляется при смене цветовой схемы

Это обеспечивает единообразие цветов обводки по всей диаграмме.

Комбинирование свойств обводки

Профессиональные комбинации

Техническая диаграмма:

  • Толщина: 2px
  • Цвет: Тёмно-серый или чёрный
  • Узор: Сплошной
  • Окончание: Butt
  • Соединение: Miter

Презентационная диаграмма:

  • Толщина: 4px
  • Цвет: Фирменный цвет
  • Узор: Сплошной
  • Окончание: Round
  • Соединение: Round

Вайрфрейм/набросок:

  • Толщина: 3px
  • Цвет: Средне-серый
  • Узор: Пунктирный или точечный
  • Окончание: Round
  • Соединение: Round

Элемент-акцент:

  • Толщина: 6-8px
  • Цвет: Яркий акцентный
  • Узор: Сплошной
  • Окончание: Round
  • Соединение: Round

Взаимодействие обводки и заливки

Обводка отрисовывается поверх заливки, располагаясь наполовину внутри и наполовину снаружи границы фигуры.

Важные следствия:

  • Широкие обводки скрывают цвет заливки у края
  • Прозрачные заливки с обводками создают фигуры только с контуром
  • Без обводки заливка распространяется до истинной границы
  • Толщина обводки слегка влияет на общий размер фигуры

Позиционирование обводки

Советы

  1. Согласуйте толщину обводки с масштабом — Тонкие обводки для детализированных диаграмм, толстые для презентаций
  2. Используйте единообразную толщину — Варьируйте только для акцента, не произвольно
  3. Контраст с заливкой — Убедитесь, что обводка видна на фоне цвета заливки
  4. Штриховые узоры для смысла — Используйте единообразно (например, всегда пунктир для «будущего состояния»)
  5. Круглые окончания для дружелюбности — Острые окончания для технической точности
  6. Проверяйте при конечном размере — Обводки могут выглядеть иначе при размере презентации по сравнению с размером редактирования

Производительность обводки

  • Сплошные обводки отрисовываются быстрее всего
  • Сложные штриховые узоры немного медленнее
  • Очень широкие обводки (15px+) могут влиять на производительность диаграмм со 100+ фигурами
  • Соединения/окончания линий оказывают минимальное влияние на производительность

Доступность

При выборе стилей обводки:

  1. Обеспечьте контраст — Обводка должна быть видима как на заливке, так и на фоне
  2. Не полагайтесь только на штриховые узоры — Сочетайте с текстовыми подписями или другими индикаторами
  3. Минимум 1px толщины — Более тонкие обводки могут быть невидимы на некоторых дисплеях
  4. Проверьте в оттенках серого — Убедитесь, что контраст обводки работает без цвета

Связанные темы