Перейти к содержанию

Прозрачность (alpha) и толщина линии (line_width)

Многие вспомогательные функции DrawZero принимают два необязательных параметра: alpha для прозрачности и line_width для толщины обводки. На этой странице объясняется, что они делают, когда их использовать и как избежать распространенных ошибок. Тон остается простым, чтобы учащиеся с базовым знанием английского языка могли следовать идеям.

Почему эти параметры важны

  • alpha контролирует, насколько фон просвечивает через ваш рисунок. Более низкие значения делают объект светлее или похожим на привидение. Более высокие значения делают его сплошным.
  • line_width контролирует, насколько толстой будет обводка фигуры или линии. Тонкие линии отлично подходят для деталей. Толстые линии помогают выделить границы или панели пользовательского интерфейса.

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

Краткий справочник

Параметр Работает с Значение по умолчанию Допустимые значения
alpha line, circle, filled_circle, rect, filled_rect, ellipse, filled_ellipse, arc, polygon, filled_polygon, rect_rotated, filled_rect_rotated, fill, image 255 Любое целое число от 0 до 255
line_width Вспомогательные функции для контуров, такие как line, circle, rect, ellipse, arc, polygon, rect_rotated 4 (виртуальные единицы, примерно 4 пикселя на холсте по умолчанию 1000×1000) Неотрицательные целые числа. Используйте 0 для заливки фигур через вспомогательную функцию для контуров.

💡 Вспомогательные функции для заливки (filled_circle, filled_rect и т. д.) уже устанавливают line_width=0 внутри, поэтому обычно вам не нужно передавать его самостоятельно.

Понимание alpha

alpha измеряет непрозрачность по шкале от 0 (полностью прозрачный) до 255 (полностью непрозрачный). DrawZero округляет значение до целого числа, поэтому передавайте целые числа.

Значение Визуальный результат
0 Объект становится невидимым. Хорошо для скрытия элементов без удаления кода.
64 Очень легкий призрак исходного цвета. Полезно для теней и направляющих для планирования.
128 Полупрозрачный. Фон хорошо виден сквозь объект.
192 В основном сплошной с мягким краем. Отлично подходит для бликов.
255 Полностью сплошной. Настройка по умолчанию.

Пример с наслоением – светящаяся кнопка

from drawzero import *

fill((20, 20, 35))
base = (500, 500)
filled_circle('#4caf50', base, 120, alpha=220)
filled_circle('#81c784', base, 90, alpha=160)
filled_circle('white', base, 60, alpha=90)
text('white', 'ИГРАТЬ', base, 48, '.^')

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

Пример – стеклянное окно с использованием фигур

from drawzero import *

fill('#202840')
rect('white', (150, 200), 700, 500, line_width=12)
filled_rect('#90caf9', (150, 200), 700, 500, alpha=120)
line('white', (150, 450), (850, 450), alpha=160, line_width=6)
line('white', (500, 200), (500, 700), alpha=160, line_width=6)

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

Пример – исчезающие копии изображения

from drawzero import *

fill('black')
for layer, opacity in enumerate(range(200, 40, -40)):
    image('runner.png', (200 + layer * 60, 420), width=220, alpha=opacity)

Этот фрагмент кода объединяет image() с разными значениями альфа-канала, чтобы показать бегуна, оставляющего след. Для получения дополнительной информации о вспомогательной функции image() прочтите Работа с изображениями.

Советы по использованию alpha

  • Держите значения альфа-канала между 30 и 80 для мягких теней и между 120 и 200 для свечения или наложений пользовательского интерфейса.
  • При наложении нескольких прозрачных слоев начинайте рисовать с самого темного фона до самого светлого переднего плана.
  • alpha умножается на любую прозрачность, уже хранящуюся в изображении PNG. Полупрозрачный пиксель с альфа-каналом 128 на пиксель становится еще светлее, если вы вызываете image(..., alpha=128).
  • Передача None или отсутствие аргумента использует значение по умолчанию 255.
  • Значения за пределами диапазона вызывают BadDrawParmsError. Дважды проверьте, что ваш код производит целые числа.

Понимание line_width

line_width описывает, насколько толстой должна быть обводка примитива. Значение измеряется в виртуальных единицах холста. На холсте по умолчанию 1000×1000 одна единица примерно равна одному пикселю.

line_width Визуальный стиль
12 Очень тонкие линии для деликатных деталей или эскизных направляющих.
36 Стандартные контуры. Значение по умолчанию 4 находится здесь.
812 Тяжелые границы для панелей, речевых пузырей или контуров карт.
20 и выше Смелый графический стиль. Полезно для мультяшных теней или временных шкал.
0 Особый случай. Фигура становится закрашенной, потому что у контура нет ширины.

Пример – использование разной толщины линий на кругах

from drawzero import *

fill('black')
for step, width in enumerate([2, 4, 8, 16]):
    circle('cyan', (200 + step * 150, 500), 60, line_width=width)
    text('white', f'line_width={width}', (200 + step * 150, 620), 24, '.^')

Четыре круга позволяют сравнить, как растет контур при увеличении line_width.

Пример – рисование закрашенной фигуры через вспомогательную функцию для контуров

from drawzero import *

fill('#263238')
rect('orange', (250, 250), 500, 300, line_width=0, alpha=220)

Установка line_width=0 указывает рендереру закрасить прямоугольник. Так работает вспомогательная функция filled_rect() внутри.

Пример – точные контуры с многоугольниками

from drawzero import *

fill('#0d1b2a')
points = [(200, 800), (500, 200), (800, 800)]
polygon('#e0e1dd', *points, line_width=6)
polygon('#778da9', *points, line_width=2, alpha=160)

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

Советы по использованию line_width

  • Используйте одинаковую line_width для связанных элементов (например, для всех кнопок), чтобы сохранить единый стиль.
  • При рисовании анимаций кэшируйте выбранное значение в переменной, чтобы оно оставалось постоянным от кадра к кадру.
  • Большие значения line_width требуют дополнительного пространства вокруг фигуры. Убедитесь, что ваши координаты оставляют отступы, чтобы обводка не обрезалась краем холста.
  • Отрицательные значения не допускаются. Если вы вычисляете ширину, оберните ее в max(0, value), чтобы избежать ошибок.

Смешивание alpha и line_width

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

from drawzero import *

fill('#1a1a1a')
outer = (150, 150)
inner = (250, 250)
rect('#ff9800', outer, 700, 700, line_width=14, alpha=220)
rect('#ffc107', inner, 500, 500, line_width=6, alpha=140)
filled_rect('#ffffff', (320, 420), 360, 200, alpha=30)
text('white', 'Брифинг миссии', (500, 360), 42, '.^')

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

Контрольный список для устранения неполадок

Симптом Вероятная причина Решение
Фигура выглядит так же после изменения alpha. Используемая вами вспомогательная функция не принимает alpha (например, text()). Проверьте документацию этой вспомогательной функции. Если в ней отсутствует alpha, нарисуйте текст поверх полупрозрачной фигуры.
Обводка выглядит размытой. Ширина линии очень велика для маленькой фигуры. Уменьшите line_width или увеличьте размер фигуры.
BadDrawParmsError: bad alpha. Значение было за пределами 0255 или не было числом. Ограничьте число или преобразуйте его с помощью int().
BadDrawParmsError: bad width. line_width было отрицательным или нечисловым. Убедитесь, что вы передаете неотрицательное целое число.
Прозрачные слои исчезают в случайном порядке. Вы рисуете самые яркие элементы первыми. Позднее непрозрачные фигуры их перекрывают. Сначала нарисуйте самый темный фон, затем более светлые прозрачные слои, затем сплошные блики.

С этими рекомендациями вы сможете уверенно выбирать значения alpha и line_width и делать ваши рисунки профессиональными.