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

Рисование эллипсов

Метод void Graphics::fillEllipse(float x, float y, float width, float height) const рисует эллипс, залитый текущим цветом, а функция void Graphics::drawEllipse(float x, float y, float width, float height, float lineThickness) const — контур эллипса с толщиной линии lineThickness ( пример 7.6, рис. 7.6).

void TCentralComponent::paint(Graphics& Canvas)
{
  // Фон виджета - белый
  Canvas.fillAll(Colours::white);
  
  // Цвет заливки эллипса - светло-зелёный
  Canvas.setColour(Colours::lightgreen);
  // Рисуем эллипс
  Canvas.fillEllipse(10, 10, 100, 50);
  
  // Цвет контура эллипса - синий
  Canvas.setColour(Colours::blue);
  // Обводим эллипс контуром 
  // толщиной 3 пикселя
  Canvas.drawEllipse(10, 10, 100, 50, 3);
}

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

Рисование произвольных фигур

Набор рассмотренных графических примитивов Juce даёт широкие возможности для рисования на канве компонентов, однако если их недостаточно, то есть возможность построения произвольных фигур как со сплошной заливкой, так и заливкой линейным и радиальным градиентом. Для этого в Juce существует специальный класс Path, который позволяет отрисовывать прямые и кривые линии, образующие фигуры как замкнутым, так и разомкнутым контуром.

Рассмотрим использование класса на примере рисования сектора, залитого линейным градиентом.

Градиент задаётся объектом класса ColourGradient, конструктор которого принимает следующие параметры: ColourGradient::ColourGradient(const Colour& colour1, float x1, float y1, const Colour& colour2, float x2, float y2, bool isRadial), где x1 и y1 — координаты первого цвета градиента (colour1), а x2 и y2 — второго (colour2). Флаг isRadial показывает, является ли градиент радиальным (в нашем случае параметр принимает значение false).

Задание заливки градиентом обеспечивает метод класса Graphics void Graphics::setGradientFill(const ColourGradient& gradient), принимающий объект класса ColourGradient в качестве параметра.

Для отображения собственно фигуры (объект класса Path) необходимо переопределить метод resized компонента ( пример 7.7). Объявим переменную Path Sector в качестве закрытого члена класса компонента содержимого нашей программы (TCentralComponent). После этого последовательно вызываем следующие функции:

• void Path::clear() throw() - удаляет все линии из объекта класса Path;
• void Path::startNewSubPath(float startX, float startY) — начинает новую линию, исходя из параметров, начальной позиции;
• void Path::quadraticTo(float controlPointX, float controlPointY, float endPointX, float endPointY) — рисует квадратную кривую Безье по заданным координатам;
• void Path::lineTo(float endX, float endY) — замыкает кривую между её последней точкой и точкой с координатами endX, endY;
• void Path::closeSubPath() - завершает рисование замкнутой фигуры. Например, если мы рисуем треугольник, следует дважды вызвать метод lineTo, а затем — closeSubPath.

Для того, чтобы облегчить расчёт координат фигуры, можно воспользоваться программой the jucer из комплекта поставки библиотеки (см. "Визуальное проектирование компонентов" ).

Отрисовку фигуры осуществляет функция void Graphics::fillPath(const Path& path, const AffineTransform & transform = AffineTransform::identity); при этом сама фигура, объект класса Path принимается в качестве параметра. Второй параметр — флаг, необходима ли аффинная трансформация фигуры. По умолчанию трансформация не производится ( пример 7.7).

#include "TCentralComponent.h"
//------------------------------------------------------
TCentralComponent::TCentralComponent() : Component ("Central Component")
{
  setSize(200, 200);
}
//------------------------------------------------------
TCentralComponent::~TCentralComponent()
{
}
//------------------------------------------------------
void TCentralComponent::paint(Graphics& Canvas)
{
  // Фон виджета - белый
  Canvas.fillAll(Colours::white);
  
  // Заливка линейным градиентом от светло-голубого до зелёного цвета
  ColourGradient LinearGradient(Colour(0xff00f7ff), 72.0f, 216.0f,
            Colours::green, 296.0f, 56.0f,
            false);
  Canvas.setGradientFill(LinearGradient);
  
  // Заливаем градиентом сектор -
  // объект класса Path
  Canvas.fillPath(Sector); // Path Sector - объявлен в качестве закрытого 
            // члена класса TCentralComponent
}
//-------------------------------------------------------
void TCentralComponent::resized()
{
  // Отрисовка фигуры
  Sector.clear();
  Sector.startNewSubPath(84.0f, 28.0f);
  Sector.quadraticTo(172.0f, 60.0f, 140.0f, 156.0f);
  Sector.lineTo(28.0f, 116.0f);
  Sector.closeSubPath();
}
//------------------------------------------------------

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

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

Здесь перечислены далеко не все возможности класса Path, однако они достаточно хорошо описаны в документации к библиотеке.