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

Цель лекции: Научиться создавать основным приёмам работы с графическими примитивами в Juce

Традиционно в программировании канвой называют область компонента, на которой можно рисовать графические примитивы, текст, а также отображать готовые изображения. Каждая точка канвы имеет координаты x и y. Начало системы координат (точка с координатами 0, 0) находится в верхне-левом углу канвы. Координата x возрастает при перемещении слева направо, а координата y — при перемещении сверху вниз. Координаты измеряются в пикселях, наименьших элементах поверхности изображения, с которыми можно манипулировать. Важнейшее свойство пикселя — его цвет.

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

За перерисовку компонента отвечает виртуальная функция virtual void Component::paint(Graphics& g), с которой мы уже знакомы по примерам из предыдущих лекций. В классах, наследуемых от Component, эта функция должна быть переопределена для того, чтобы отобразить их содержимое.

До сих пор мы использовали этот метод лишь для того, чтобы производить заливку цветом фона компонента с помощью функции void Graphics::fillAll() const, которая, как мы видим, является методом класса Graphics.

Класс Graphics представляет собой платформ-независимый контекст рисования для прорисовки компонента или изображения. В каждом компоненте Juce есть хотя бы один объект этого класса, который передаётся в функцию virtual void Component::paint(Graphics& g) в качестве параметра. Понятно, что класс обладает большим набором методов для рисования фоновых изображений компонентов, не ограничивающихся фоновой заливкой цветом. Он содержит методы для рисования линий, прямоугольников, окружностей и др. Рассмотрим их на простых примерах.

Рисование точек

Для отображения точек используется метод класса Graphics void Graphics::setPixel(int x, int y) const, который закрашивает пиксель с координатами x и y текущим цветом. В листинге 7.1 приведён пример отображения восьми точек, расположенных по кругу (далее в этой главе для краткости в листингах будет приводиться лишь реализация метода paint).

#include "TCentralComponent.h"
//------------------------------------------------------
#include <cmath> // Функции вычисления синуса и косинуса
//------------------------------------------------------
TCentralComponent::TCentralComponent() : Component ("Central Component")
{
  setSize(100, 100);
}
//------------------------------------------------------
TCentralComponent::~TCentralComponent()
{
}
//------------------------------------------------------
void TCentralComponent::paint(Graphics& Canvas)
{
  // Фон виджета - белый
  Canvas.fillAll(Colours::white);
  
  // Цвет рисуемых точек - чёрный
  Canvas.setColour(Colours::black);
  
  int iPointsNumber = 8; // Число точек
  // Вычисляем координаты точек
  for(int i = 0; i < iPointsNumber; ++i)
  {
    float fAngle = 2 * float_Pi * i / iPointsNumber;
    int iX = 50 + cos(fAngle) * 40;
    int iY = 50 + sin(fAngle) * 40;
    
    // Рисуем точку
    Canvas.setPixel(iX, iY);
  }
}
//------------------------------------------------------
void TCentralComponent::resized()
{
}
//------------------------------------------------------

Внешний вид работающей программы показан на рисунке 7.1 .

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

Обратите внимание, что для расчёта координат точек мы использовали константу float_Pi из заголовочного файла juce_MathsFunctions.h. В этом же файле объявлена константа double_Pi, отличающаяся от первой, как понятно из названия, точностью числа .