Линии, прямоугольники и окружности

Один текст быстро наскучивает. Библиотека GFX также рисует фигуры, поэтому Вы можете обрамлять данные, создавать индикаторы и проектировать настоящий небольшой интерфейс. 🎨

Каждая фигура располагается на координатной сетке. Точка (0,0) находится в левом верхнем углу; x увеличивается вправо, а y — вниз, как и у использованного Вами курсора текста.

Самая маленькая отметка — это одна точка. drawPixel получает координаты x и y, а также цвет и включает ровно одну точку на экране.

drawLine соединяет две точки. Укажите начальные x и y, конечные x и y, а также цвет, чтобы провести между ними прямую линию.

drawRect нужны координаты x и y верхнего левого угла, а затем ширина и высота. Функция рисует только границу — это удобно для обрамления значения или раздела.

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

drawCircle получает координаты центра x и y, а также радиус. Функция рисует кольцо, удобное для шкал, индикаторов состояния или круглых значков.

Используйте fillCircle, чтобы получить сплошной диск. Небольшой заполненный круг создаёт понятный индикатор включённого или выключенного состояния, который легко распознать с первого взгляда.

Для более мягкого вида drawRoundRect добавляет радиус скругления углов после ширины и высоты. Скруглённые блоки делают кнопки и карточки более дружелюбными.

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

Как всегда, все рисунки заполняют буфер. Завершите работу с фигурами вызовом display.display(), чтобы всё составленное изображение появилось одновременно.

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