Канвас. Малювання та додавання компонентів на канвас

Лабораторна робота №7.

Тема роботи: Канвас. Малювання та додавання компонентів на канвас

Мета роботи: Навчитися створювати основним прийомам роботи з графічними примітивами в Juce

Завдання: Створіть програму з одним головним вікном білого кольору з незмінними розмірами. За допомогою методів класу Graphics намалюйте на канві компонента вмісту малюнок згідно з варіантом. Варіант завдання відповідає номеру студента у списку групи.

Теоретичні відомості

Традиційно в програмуванні канвою називають область компонента, на якій можна малювати графічні примітиви, текст, а також відображати готові зображення. Кожна точка канви має координати 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 // Функції обчислення синуса і косинуса

//------------------------------------------------------

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. Приклад малювання точок на канві компонента (файл TCentralComponent.cpp)

Зовнішній вигляд працюючої програми показаний на рис. 7.1 .