Графические примитивы

На этой странице показано, как использовать самые распространенные функции рисования в DrawZero. Цель — помочь вам создавать красивые скетчи, даже если вы новичок в программировании. Мы сосредоточимся на именах цветов, точках и фигурах. Прочтите Прозрачность (alpha) и толщина линии (line_width), когда захотите управлять эффектами прозрачности или размерами обводки.

Если вы хотите перемещать точку в черепашьем стиле, откройте справочник по Pt. Для плавных цветовых переходов или анимированных следов обратитесь к справочнику по Gradient.

Как только вы освоитесь с рисованием статичных фигур, переходите к руководству по анимации. В нем объясняется, как поместить ваши рисунки в игровой цикл, управлять скоростью с помощью tick() и даже создавать следы движения.

Каждый пример начинается с одного и того же импорта:

from drawzero import *

После импорта вы можете вызывать функции одну за другой. Виртуальный холст имеет размер 1000 на 1000 единиц. Координаты всегда записываются как (x, y).

Именованные цвета для быстрых скетчей

Вы можете передать цвет в виде короткого текста, такого как 'red', 'white', 'black', 'gold', 'skyblue' и многих других. Библиотека понимает сотни имен и преобразует их в правильные значения RGB для вас.

`line(color='red', start=(100, 100), end=(200, 200), *args)`

Рисует прямой отрезок от начальной до конечной точки.

Советы

start и end — это пары координат. (0, 0) — это верхний левый угол, (1000, 1000) — нижний правый.
По умолчанию линия красная от (100, 100) до (200, 200).

Пример – диагональная линия белого цвета

from drawzero import *

line('white', (0, 0), (1000, 1000))

Этот код рисует тонкую белую линию из верхнего левого угла в нижний правый.

Пример – перекрестие голубого цвета

from drawzero import *

line('cyan', (500, 0), (500, 1000))
line('cyan', (0, 500), (1000, 500))

Два вызова создают вертикальную и горизонтальную линии, которые пересекаются в центре.

`circle(color='red', pos=(100, 100), radius=10, *args)`

Рисует контур окружности.

Советы

pos — это центральная точка окружности.
radius — это расстояние от центра до края окружности в единицах холста.

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

from drawzero import *

circle('blue', (300, 300), 80)

Пример – три концентрические окружности

from drawzero import *

center = (750, 200)
circle('orange', center, 40)
circle('white', center, 80)
circle('green', center, 120)

`filled_circle(color='red', pos=(100, 100), radius=10, *args)`

Рисует круг, заполненный выбранным цветом.

Пример – огни светофора

from drawzero import *

x = 200
filled_circle('red', (x, 200), 60)
filled_circle('yellow', (x, 400), 60)
filled_circle('green', (x, 600), 60)

Пример – солнце с лицом

from drawzero import *

filled_circle('gold', (800, 200), 100)
filled_circle('black', (760, 170), 10)
filled_circle('black', (840, 170), 10)
line('black', (760, 240), (840, 240))

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

Цвета в виде RGB-кортежей

Иногда вам нужен очень специфический оттенок, у которого нет имени. В этом случае вы можете передать кортеж (R, G, B), где каждое значение находится в диапазоне от 0 до 255. (255, 0, 0) — это чистый красный, (0, 255, 0) — чистый зеленый, (0, 0, 255) — чистый синий. Смешивание значений дает новые цвета.

`rect(color='red', pos=(100, 100), width=500, height=200, *args)`

Рисует только границу прямоугольника.

pos — это верхний левый угол прямоугольника.
width растягивает прямоугольник вправо.
height растягивает его вниз.

Пример – бирюзовая рамка с использованием RGB

from drawzero import *

rect((0, 128, 128), (100, 100), 300, 200)

Пример – рамка для картины вокруг заполненной области

from drawzero import *

filled_rect((240, 230, 140), (200, 200), 400, 300)
rect((139, 69, 19), (200, 200), 400, 300)

Первый вызов рисует фон. Второй вызов, используя rect, оставляет только контур.

`filled_rect(color='red', pos=(100, 100), width=500, height=200, *args)`

Рисует сплошной прямоугольник.

Пример – простая панель интерфейса

from drawzero import *

filled_rect((30, 30, 30), (50, 50), 300, 150)
text('white', 'Счет: 1200', (70, 90))

Пример – плитка шахматной доски

from drawzero import *

for row in range(4):
    for col in range(4):
        color = (255, 255, 255) if (row + col) % 2 == 0 else (0, 0, 0)
        filled_rect(color, (100 + col * 60, 100 + row * 60), 60, 60)

Этот цикл проходит по 16 квадратам и выбирает белый или черный цвет с помощью RGB-кортежей.

Константа-помощник для цветов `C`

Вы также можете импортировать специальный объект C, который содержит все именованные цвета в качестве атрибутов. Это отлично работает в современных IDE: при вводе C. появляется выпадающий список имен цветов, и IDE может предупредить вас, если имя неверно.

from drawzero import C, line

line(C.lightskyblue, (100, 500), (900, 500))

Если хотите, вы можете импортировать оба стиля вместе:

from drawzero import *, C
filled_circle(C.magenta, (500, 500), 120)

Полный список именованных цветов, доступных через C (665 элементов)

Другие инструменты рисования

Следующие функции основаны на тех же идеях. Вы можете смешивать текстовые цвета, RGB-кортежи или значения из C со всеми из них.

`grid()`

Рисует вспомогательную координатную сетку. Линии появляются каждые 100 единиц с небольшими метками. Используйте ее при планировании позиций.

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

from drawzero import *

grid()

Вы можете рисовать другие фигуры поверх сетки, а затем удалить вызов grid(), когда закончите планирование.

`polygon(color='red', *points)`

Рисует контур многоугольника. Передайте каждый угол как отдельную пару (x, y). Функция автоматически соединяет последнюю точку с первой.

Пример – простой треугольник

from drawzero import *

polygon('orange', (200, 800), (500, 400), (800, 800))

Пример – контур звезды

from drawzero import *

points = [
    (500, 200),
    (560, 380),
    (740, 380),
    (600, 500),
    (660, 680),
    (500, 580),
    (340, 680),
    (400, 500),
    (260, 380),
    (440, 380),
]
polygon('gold', *points)

`filled_polygon(color='red', *points)`

Заполняет внутреннюю часть многоугольника, используя тот же формат точек.

Пример – форма воздушного змея с тенью

from drawzero import *

shape = [(500, 200), (700, 400), (500, 800), (300, 400)]
filled_polygon('lightblue', *shape)
polygon('navy', *shape)

Пример – силуэты гор

from drawzero import *

mountain1 = [(0, 800), (200, 400), (400, 800)]
mountain2 = [(300, 800), (550, 300), (800, 800)]
filled_polygon((70, 90, 110), *mountain1)
filled_polygon((50, 70, 90), *mountain2)

Второй многоугольник использует RGB-кортежи для более темного оттенка.

`text(color='red', text='Hello!', pos=(100, 100), fontsize=24, align='..')`

Рисует текст на холсте.

text — это строка, которую вы хотите показать.
pos — это точка привязки.
fontsize — управляет размером в пикселях.
align — определяет, как точка привязки "прилипает" к тексту. Первый символ отвечает за горизонтальное выравнивание ('<' — по левому краю, '.' — по центру, '>' — по правому краю). Второй символ отвечает за вертикальное выравнивание ('^' — по верхнему краю, '.' — по середине, 'v' — по нижнему краю).

Пример – табло по центру

from drawzero import *

text('white', 'Уровень пройден!', (500, 120), 48, '.^')

Пример – метки рядом с фигурами

from drawzero import *

rect('white', (150, 700), 200, 120)
text('white', 'База игрока', (150, 700), 24, '<^')
text('yellow', 'Опасная зона', (250, 760), 24, '..')

`fill(color='red')`

Заполняет весь холст сплошным цветом. Это очень полезно для фона перед рисованием других объектов.

Пример – фон ночного неба

from drawzero import *

fill((10, 10, 35))
filled_circle('white', (200, 150), 5)
filled_circle('white', (600, 220), 4)

Пример – быстрая очистка цвета

from drawzero import *

fill('white')
line('black', (100, 100), (900, 900))

Вызов fill('white') удаляет старые рисунки, закрашивая весь холст белым цветом, прежде чем вы начнете снова.

Эллипсы, дуги и повернутые прямоугольники

Эти функции позволяют создавать вытянутые круги и наклоненные прямоугольники. Они следуют тем же правилам цвета, что и раньше: вы можете использовать имена цветов, RGB-кортежи или значения из C. Для советов по прозрачности и размеру обводки прочтите Прозрачность (alpha) и толщина линии (line_width).

`ellipse(color='red', pos=(100, 100), width=500, height=200, *args, alpha=255, line_width: int = None)`

Рисует контур эллипса. Эллипс вписывается в невидимый прямоугольник, верхний левый угол которого — pos, width — простирается вправо, а height — вниз.

Советы

Думайте об эллипсе как о сплюснутом круге. Когда width равно height, вы получаете идеальный контур круга.
Разместить эллипс в середине холста легко, если вы скомбинируете его с grid() из предыдущего раздела.

Пример – направляющая для орбиты планеты

from drawzero import *

grid()
ellipse('white', (200, 300), 600, 200)
filled_circle('yellow', (500, 400), 40)
filled_circle('dodgerblue', (750, 400), 20)

Эллипс обозначает орбиту, а заполненные круги показывают звезду и планету.

Пример – рамка прожектора на сцене

from drawzero import *

fill((10, 10, 25))
ellipse('gold', (250, 150), 500, 700)
text('white', 'Шоу талантов', (500, 220), 48, '.^')

Высокий эллипс окружает заголовок, как светящаяся рамка.

`filled_ellipse(color='red', pos=(100, 100), width=500, height=200, *args, alpha=255)`

Заполняет весь эллипс цветом, используя ту же идею ограничивающей рамки, что и ellipse.

Советы

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

Пример – спокойный пруд с отражением

from drawzero import *

fill((120, 180, 255))
filled_ellipse((70, 120, 200), (200, 650), 600, 220)
filled_ellipse((150, 200, 255), (260, 690), 480, 140)

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

Пример – дорожки для бега

from drawzero import *

fill((30, 120, 30))
for offset in range(0, 80, 20):
    filled_ellipse('sienna', (150 + offset, 200 + offset), 700 - 2 * offset, 400 - 2 * offset)

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

`arc(color='red', pos=(100, 100), width=500, height=200, start_angle=45, stop_angle=270, alpha=255, line_width: int = None)`

Рисует часть контура эллипса между двумя углами. Углы измеряются в градусах, где 0 указывает вправо, а значения растут против часовой стрелки.

Советы

Используйте разницу между start_angle и stop_angle меньше 360, чтобы создать изогнутый срез.
Попробуйте комбинировать arc с filled_circle для глаз или индикаторов, чтобы добавить выразительные детали в ваши рисунки.

Пример – улыбающийся рот на лице

from drawzero import *

fill((255, 224, 189))
filled_circle('black', (420, 360), 15)
filled_circle('black', (580, 360), 15)
arc('brown', (360, 420), 280, 160, 200, 340)

Здесь дуга начинается с левой стороны (около 200 градусов) и заканчивается на правой стороне (около 340 градусов), оставляя изогнутую улыбку внизу.

Пример – индикатор прогресса

from drawzero import *

fill((20, 20, 30))
ellipse('gray', (250, 250), 500, 500)
arc('lime', (250, 250), 500, 500, 180, 360)
text('white', '50%', (500, 520), 64, '.^')

Зеленая дуга начинается слева (180 градусов) и заканчивается справа (360 градусов), покрывая нижнюю половину круга, как индикатор прогресса.

`rect_rotated(color='red', pos=(100, 100), width=500, height=200, angle=0, *args, alpha=255, line_width: int = None)`

Рисует контур прямоугольника, который был повернут вокруг своего центра. Неповернутый прямоугольник начинался бы в pos и имел бы размеры width на height. Положительные углы поворачивают фигуру против часовой стрелки.

Советы

Сначала нарисуйте прямоугольник с помощью rect, затем переключитесь на rect_rotated, когда узнаете правильный угол.
Небольшие углы (например, 15 или 20 градусов) отлично подходят для придания объектам ощущения движения.

Пример – наклоненная фоторамка

from drawzero import *

fill((240, 235, 220))
rect_rotated('saddlebrown', (250, 200), 500, 350, -12)
filled_rect('white', (270, 220), 460, 310)
text('black', 'Семейная поездка', (500, 350), 36, '.^')

Небольшой отрицательный угол заставляет рамку наклоняться вправо.

Пример – предупреждающий знак

from drawzero import *

fill((40, 40, 40))
rect_rotated('yellow', (350, 300), 300, 300, 45)
text('black', '!', (500, 450), 180, '.^')

Поворот квадрата на 45 градусов превращает его в контур в форме ромба.

`filled_rect_rotated(color='red', pos=(100, 100), width=500, height=200, angle=0, *args, alpha=255)`

Заполняет повернутый прямоугольник, используя те же правила центра и угла, что и rect_rotated.

Советы

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

Пример – вращающийся пропеллер

from drawzero import *

fill((15, 15, 35))
for blade in range(4):
    filled_rect_rotated('deepskyblue', (460, 360), 80, 280, blade * 45)
filled_circle('white', (500, 500), 60)

Каждая итерация рисует одну лопасть, поворачивая один и тот же прямоугольник.

Пример – уютный ковер на полу

from drawzero import *

fill((120, 85, 60))
filled_rect_rotated((200, 120, 70), (250, 250), 500, 320, 8)
rect_rotated((120, 60, 30), (250, 250), 500, 320, 8)

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

Графические примитивы

Именованные цвета для быстрых скетчей

line(color='red', start=(100, 100), end=(200, 200), *args)

circle(color='red', pos=(100, 100), radius=10, *args)

filled_circle(color='red', pos=(100, 100), radius=10, *args)

Цвета в виде RGB-кортежей

rect(color='red', pos=(100, 100), width=500, height=200, *args)

filled_rect(color='red', pos=(100, 100), width=500, height=200, *args)

Константа-помощник для цветов C

Другие инструменты рисования

grid()

polygon(color='red', *points)

filled_polygon(color='red', *points)

text(color='red', text='Hello!', pos=(100, 100), fontsize=24, align='..')

fill(color='red')

Эллипсы, дуги и повернутые прямоугольники

ellipse(color='red', pos=(100, 100), width=500, height=200, *args, alpha=255, line_width: int = None)

filled_ellipse(color='red', pos=(100, 100), width=500, height=200, *args, alpha=255)

arc(color='red', pos=(100, 100), width=500, height=200, start_angle=45, stop_angle=270, alpha=255, line_width: int = None)

rect_rotated(color='red', pos=(100, 100), width=500, height=200, angle=0, *args, alpha=255, line_width: int = None)

filled_rect_rotated(color='red', pos=(100, 100), width=500, height=200, angle=0, *args, alpha=255)

`line(color='red', start=(100, 100), end=(200, 200), *args)`

`circle(color='red', pos=(100, 100), radius=10, *args)`

`filled_circle(color='red', pos=(100, 100), radius=10, *args)`

`rect(color='red', pos=(100, 100), width=500, height=200, *args)`

`filled_rect(color='red', pos=(100, 100), width=500, height=200, *args)`

Константа-помощник для цветов `C`

`grid()`

`polygon(color='red', *points)`

`filled_polygon(color='red', *points)`

`text(color='red', text='Hello!', pos=(100, 100), fontsize=24, align='..')`

`fill(color='red')`

`ellipse(color='red', pos=(100, 100), width=500, height=200, *args, alpha=255, line_width: int = None)`

`filled_ellipse(color='red', pos=(100, 100), width=500, height=200, *args, alpha=255)`

`arc(color='red', pos=(100, 100), width=500, height=200, start_angle=45, stop_angle=270, alpha=255, line_width: int = None)`

`rect_rotated(color='red', pos=(100, 100), width=500, height=200, angle=0, *args, alpha=255, line_width: int = None)`

`filled_rect_rotated(color='red', pos=(100, 100), width=500, height=200, angle=0, *args, alpha=255)`