Рисование на канве компонентов

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

Прямоугольник — одна из самых распространённых геометрических фигур. Для рисования прямоугольников класс Graphics включает специальные методы: void Graphics::drawRect(int x, int y, int width, int height, int lineThickness = 1) const и void Graphics::drawRect(int x, int y, int width, int height, float lineThickness = 1.0f) const. Как можно видеть, разница между методами лишь в последнем параметре: в первой функции толщина линии контура прямоугольника задаётся целым числом, а во второй — числом с плавающей точкой. Понятно, что x и y — это координаты верхне-левого угла прямоугольника, width — его ширина, а height — высота.

Вышеприведённые функции рисуют лишь контур прямоугольника. Для заливки его текущим (заданным) цветом используются методы void Graphics::fillRect(int x, int y, int width, int height) const и void Graphics::fillRect(float x, float y, float width, float height) const. Значения параметров этих методов те же, что и у вышеприведённых функций.

Кроме того, класс Graphics включает одноимённые методы, которые принимают в качестве параметра объект класса Rectangle, хранящий информацию о многоугольнике.

Рассмотрим рисование прямоугольников на простом примере. Задайте размеры компонента содержимого программы равными 120 на 120 пикселей. Нарисуем на его канве два квадрата — красный и, внутри первого, второй, жёлтый. Обведём второй прямоугольник чёрным контуром ( пример 7.4, рис. 7.4).

void TCentralComponent::paint(Graphics& Canvas)
{
  // Фон виджета - белый
  Canvas.fillAll(Colours::white);
  
  // Цвет заливки первого прямоугольника - красный
  Canvas.setColour(Colours::red);
  // Рисуем первый прямоугольник
  Canvas.fillRect(10, 10, 100, 100);
  
  // Цвет заливки второго прямоугольника - жёлтый
  Canvas.setColour(Colours::yellow);
  // Рисуем второй прямоугольник (внутри первого)
  Canvas.fillRect(20, 20, 80, 80);
  
  // Цвет контура второго прямоугольника - чёрный
  Canvas.setColour(Colours::black);
  // Обводим второй прямоугольник контуром 
  // толщиной 3 пикселя
  Canvas.drawRect(20, 20, 80, 80, 3);
}

Рис. 7.4. Программа, рисующая два квадрата на канве компонента содержимого

Также класс Graphics включает методы для рисования / заливки прямоугольников с закруглёнными углами. Это void Graphics::drawRoundedRectangle(float x, float y, float width, float height, float cornerSize, float lineThickness) const и void Graphics::fillRoundedRectangle(float x, float y, float width, float height, float cornerSize) const, соответственно. Параметр cornerSize задаёт, насколько сильно должны быть закруглены углы прямоугольника. При присвоении параметру нулевого значения углы не будут закруглены. При присвоении ему значения 100 прямоугольник превратится в эллипс. Также имеются перегруженные функции, в которых прямоугольную область можно задавать объектом класса Rectangle.

Перепишем пример из листинга 7.4 с использованием функций drawRoundedRectangle и fillRoundedRectangle ( пример 7.5, рис. 7.5).

void TCentralComponent::paint(Graphics& Canvas)
{
  // Фон виджета - белый
  Canvas.fillAll(Colours::white);
  
  // Цвет заливки первого прямоугольника - красный
  Canvas.setColour(Colours::red);
  // Рисуем первый прямоугольник
  Canvas.fillRoundedRectangle(10, 10, 100, 100, 10);
  
  // Цвет заливки второго прямоугольника - жёлтый
  Canvas.setColour(Colours::yellow);
  // Рисуем второй прямоугольник (внутри первого)
  Canvas.fillRoundedRectangle(20, 20, 80, 80, 10);
  
  // Цвет контура второго прямоугольника - чёрный
  Canvas.setColour(Colours::black);
  // Обводим второй прямоугольник контуром 
  // толщиной 3 пикселя
  Canvas.drawRoundedRectangle(20, 20, 80, 80, 10, 3);
}

Рис. 7.5. Программа, рисующая два квадрата с закруглёнными углами на канве компонента содержимого