Построения графических систем с применением инструментов Winapi и GDI+ (стр. 2 )

StringAlignment StringFormat::GetLineAlignment() – возвращает формат выравнивания по вертикали внутри прямоугольной области.

Status StringFormat::SetAlignment(StringAlignment align) – устанавливает формат выравнивания внутри прямоугольной области, отведённой для вывода текста. StringAlignment(StringAlignmentNear, StringAlignmentCenter, StringAlignmentFar)

Status StringFormat::SetLineAlignment(StringAlignment align) – устанавливает формат вертикального выравнивания внутри прямоугольной области, отведённой для вывода текста.

Пример:

// Создание объекта для рисования

Graphics g(hdc);

// Точка размещения объекта

PointF point(100, 50);

// Кисть рисования

SolidBrush brush(Color(255, 0, 0));

// Определяет форматирование

StringFormat format;

// Горизонтальное выравнивание

format.SetAlignment(StringAlignmentCenter);

// Вертикальное выравнивание

format.SetLineAlignment(StringAlignmentCenter);

// Шрифт текста

Font font(L"Comic Sans MS", 48, FontStyleBold);

g.DrawString(L"Test string", -1, &font, point, &format, &brush);

3.4 Основной класс рисования Graphics

Класс Graphics предоставляет методы для рисования линий как прямых так и ломаных, фигур, растровых изображений и текста. Объект Graphics хранит атрибуты устройства отображения и атрибуты рисуемых элементов.

Graphics::Graphics(HDC hdc) – создаёт объект Graphics связанный с контекстом устройства hdc

Graphics::Graphics(HWND hwnd, BOOL icm = FALSE) – создаёт объект Graphics связанный с окном hwnd

Status Graphics::Clear(const Color& color) – очищает объект заданным цветом

Status Graphics::DrawCurve(const Pen* pen, const Point* points, INT count) – рисует сплайн между заданными точками points указанным пером pen

Status Graphics::DrawEllipse(const Pen* pen, const Rect& rect) – рисует эллипс вписанный в прямоугольную область rect указанным пером pen

Status Graphics::DrawImage(const Image* image, const Point& point) - рисует растровое изображение image в указанной точке point

Status Graphics::DrawLine(const Pen* pen, const Point& point1, const Point& point2) – рисует прямую линию между точками point1 и point2 указанным пером pen

Status Graphics::DrawPath(const Pen* pen, const GraphicsPath* path) – рисует последовательность состояющую из линий и ломаных, заданную в объекте path.

Status Graphics::DrawPolygon(const Pen* pen, const Point* points, const INT* count) – рисует полигон по заданным точкам points указанным пером pen. Если начальная и конечная точки не совпадают, контур полигона замыкается автоматически.

Status Graphics::DrawRectangle(const Pen* pen, const RectF& rect) – рисует прямоугольник заданного размера указанным пером pen

Status Graphics::DrawString(const WCHAR* string, const INT length, const Font* font, const PointF& origin, const StringFormat *stringFormat, const Brush* brush) – рисует строку используя параметры шрифта и начальной точки для размещения строки

Для того чтобы нарисовать линию в GDI+ необходимо создать объекты Graphics и Pen. Объект Graphics предоставляет методы для непосредственного рисования, а объект Pen содержит атрибуты пера такие как цвет линии, толщина и стиль.

Пример:

Graphics g(hwnd);

// Создание перьев различных цветов

Pen bluePen(Color(0, 0, 255));

Pen greenPen(Color(0, 255, 0));

Point p1(10, 10), p2(30, 50);

// Построение линий

g. DrawLine(&bluePen, p1, p2);

g. DrawLine(&greenPen, Point(30, 50), Point(100, 200));

// Создание массива точек, описывающих полигон

Point points[] = { Point(100, 100), Point(200, 130), Point(150, 200), Point(50, 200), Point(0, 130)};

// Построение полигона

g.DrawPolygon(&pen, (Point *)&points, 5);

// Построение сплайна по заданным точкам

g.DrawCurve(&pen, (Point *)&points, 5);

3.5 Задание для самостоятельной работы

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

Задание. Разработать Win32 приложение, реализующее построение графиков функций на интервале [0; 60]:

Графическое окно для построения графиков должно иметь: заголовок диаграммы, оси, подписи по осям, деления на осях, сетку, а также графики функций. Для наглядности графики функций следует различать цветом, а также типом и толщиной линии.

Пример реализации подобного приложения приведён в
«06 U_T_Diagram»

Последовательность выполнения

Создать проект Win32 с именем «Lab2» Для обработки события WM_PAINT определить функцию следующего вида: void OnPaint(HWND hwnd, HDC hdc) Изменить расположение системы координат в точку (0; 0) на графике Определить перо, шрифт и кисть для построения сетки Нанести сетку и подписи делений по осям Х, Y Определить перо, шрифт и кисть для построения осей графика Построить оси Х, Y и нанести подписи осей Определить цвета перьев для построения графиков Построить графики Определить шрифт для вывода названия графика Вывести название графика

4 Цвет в компьютерной графике

· цветовые модели

· преобразование цветовых компонентов между моделями RGB и HSV

· масштабирование изображений средствами GDI+

Приложение «Цветовое пространство HSV»

Цветовая модель — термин, обозначающий абстрактную модель описания представления цветов в виде кортежей чисел, обычно из трёх или четырёх значений, называемых цветовыми компонентами или цветовыми координатами. Вместе с методом интерпретации этих данных (например, определение условий воспроизведения и/или просмотра — то есть задание способа реализации), множество цветов цветовой модели определяет цветовое пространство.

Цветовые пространства описываются набором цветовых координат и правилами построения цветов. К примеру, RGB является трёхмерным цветовым пространством, где каждый цвет описан набором из трёх координат — каждая из них отвечает компоненте цвета в разложении на красный, зелёный и синий цвета. Количество координат задаёт размерность пространства. Существует масса цветовых пространств различной размерности — от одномерных, которые могут описать исключительно монохромное изображение, до шести и десяти-мерных, таких, например, как пространство CMYKLcLm (Cyan, Magenta, Yellow, Key color, lightCyan, lightMagenta). Пространства высокой размерности чаще всего используются в целях печати на плоттерах или аппаратах для цветопроб.

4.1 Классификация и различия цветовых моделей

Цветовые модели можно классифицировать по их целевой направленности

Модели описания восприятия цвета – L*a*b*. (Lab нашел широкое применение в программном обеспечении для обработки изображений в качестве промежуточного цветового пространства, через которое происходит конвертирование данных между другими цветовыми пространствами (например, из RGB сканера в CMYK печатного процесса). При этом особые свойства Lab сделали редактирование в этом пространстве мощным инструментом цветокоррекции) Аддитивные модели — рецепты получения цвета на мониторе (например, RGB). Полиграфические модели — получение цвета при использовании разных систем красок и полиграфического оборудования (например, CMYK). Математические модели, полезные для каких-либо способов цветокоррекции, но не связанные с оборудованием, (например HSV).

4.2 Распространённые цветовые модели

Цветовая модель sRGB (IEC 61966-2.1), разновидность модели RGB, широко используется в компьютерной индустрии (на ней основаны широко распространённые форматы изображений JPEG и класс форматов видео MPEG). CMYK — основная субтрактивная цветовая модель используемая в полиграфии. В телевидении для стандарта PAL применяется цветовая модель YUV, для SÉCAM — модель YDbDr, а для NTSC — модель YIQ. Эти модели основаны на принципе, согласно которому основную информацию несёт яркость изображения — составляющая Y (важно — Y в этих моделях вычисляется совершенно по другому чем Y в модели XYZ), а две другие составляющие, отвечающие за цвет, менее важны. Мастер-модель XYZ основана на замерах характеристик человеческого глаза (так называемого "Стандартного Колориметрического Наблюдателя"). XYZ — единственная цветовая модель, в которой любой цвет, ощущаемый человеком, представим только положительными значениями координат. Из модели XYZ выводяться все другие модели, путем соответствующих математических преобразований.

4.3 Цветовая модель RGB

RGB (аббревиатура английских слов Red, Green, Blue — красный, зелёный, синий) — аддитивная цветовая модель, как правило описывающая способ синтеза цвета для цветовоспроизведения. Джеймс Максвелл предложил аддитивный синтез цвета как способ получения цветных изображений в 1861 году.

Выбор основных цветов обусловлен особенностями физиологии восприятия цвета сетчаткой человеческого глаза. Цветовая модель RGB нашла широкое применение в технике.

Аддитивной она называется потому, что цвета получаются путём добавления (англ. addition) к черному. Иначе говоря, если цвет экрана, освещённого цветным прожектором, обозначается в RGB как (r1, g1, b1), а цвет того же экрана, освещенного другим прожектором, — (r2, g2, b2), то при освещении двумя прожекторами цвет экрана будет обозначаться как (r1+r2, g1+g2, b1+b2).

Изображение в данной цветовой модели состоит из трёх каналов. При смешении основных цветов (основными цветами считаются красный, зелёный и синий) — например, синего (B) и красного (R), мы получаем пурпурный (M magenta), при смешении зеленого (G) и красного (R) — жёлтый (Y yellow), при смешении зеленого (G) и синего (B) — циановый (С cyan). При смешении всех трёх цветовых компонентов мы получаем белый цвет (W).

В телевизорах и мониторах применяются три электронные пушки (светодиода, светофильтра) для красного, зелёного и синего каналов.

Цветовая модель RGB была изначально разработана для описания цвета на цветном мониторе, но поскольку мониторы разных моделей и производителей различаются, были предложены несколько альтернативных цветовых моделей, соответствующих «усредненному» монитору. К таким относятся, например, sRGB и Adobe RGB.

4.4 Цветовая модель HSV

HSV (англ. Hue, Saturation, Value — тон, насыщенность, значение) или HSB (англ. Hue, Saturation, Brightness — оттенок, насыщенность, яркость) — цветовая модель, в которой координатами цвета являются:

· Hue — цветовой тон, (например, красный, зелёный или сине-голубой). Варьируется в пределах 0—360°, однако иногда приводится к диапазону 0—100 или 0—1.

· Saturation — насыщенность. Варьируется в пределах 0—100 или 0—1. Чем больше этот параметр, тем «чище» цвет, поэтому этот параметр иногда называют чистотой цвета. А чем ближе этот параметр к нулю, тем ближе цвет к нейтральному серому.

· Value (значение цвета) или Brightness — яркость. Также задаётся в пределах 0—100 и 0—1.

Шкала оттенков — Hue

Модель была создана Элви Реем Смитом, одним из основателей Pixar, в 1978 году. Она является нелинейным преобразованием модели RGB.

Цвет, представленный в HSV, зависит от устройства, на которое он будет выведен, так как HSV — преобразование модели RGB, которая тоже зависит от устройства. Для получения кода цвета, не зависящего от устройства, используется модель Lab.

Следует отметить, что HSV (HSB) и HSL — две разные цветовые модели.

4.4.1 Трёхмерные визуализации пространства HSV

Простейший способ отобразить HSV в трёхмерное пространство — воспользоваться цилиндрической системой координат. Здесь координата H определяется полярным углом, S — радиус-вектором, а V — Z-координатой. То есть, оттенок изменяется при движении вдоль окружности цилиндра, насыщенность — вдоль радиуса, а яркость — вдоль высоты. Несмотря на «математическую» точность, у такой модели есть существенный недостаток: на практике количество различимыхглазом уровней насыщенности и оттенков уменьшается при приближении яркости (V) к нулю (то есть, на оттенках, близких к чёрному). Также на малых S и V появляются существенные ошибкиокругления при переводе RGB в HSV и наоборот. Поэтому чаще применяется коническая модель.

4.4.2 HSV и восприятие цвета

Часто художники предпочитают использовать HSV вместо других моделей, таких как RGB и CMYK, потому что они считают, что устройство HSV ближе к человеческому восприятию цветов. RGB и CMYK определяют цвет как комбинацию основных цветов (красного, зелёного и синего или жёлтого, розового, голубого и чёрного соответственно), в то время как компоненты цвета в HSV отображают информацию о цвете в более привычной человеку форме: Что это за цвет? Насколько он насыщенный? Насколько он светлый или тёмный? Цветовое пространство HSL представляет цвет похожим и даже, возможно, более интуитивно понятным образом, чем HSV.

4.5 Преобразование цветовых компонентов между моделями RGB и HSV

Для определённости положим, что:

4.5.1 RGB → HSV

Пусть MAX — максимальное значение из R, G и B, а MIN — минимальное из них.

V = MAX

4.5.2 HSV → RGB

Для получения цветовых параметров в диапазоне от 0 до 255 выполнить

p = p*255;

q =q*255;

t = t*255;

V = V*255;

если Hi = 0 → R = V, G=t, B = p

если Hi = 1 → R = q, G=V, B = p

если Hi = 2 → R = p, G=V, B = t

если Hi = 3 → R = p, G=q, B = V

если Hi = 4 → R = t, G=p, B = V

если Hi = 5 → R = V, G=p, B = q

В компьютерной графике компоненты S и V принято представлять целым числом от 0 до 255 (в окне выбора цветов в Microsoft Windows — от 0 до 240) вместо вещественного от 0 до 1. При целочисленном кодировании для каждого цвета в HSV есть соответствующий цвет в RGB. Однако обратное утверждение не является верным: некоторые цвета в RGB нельзя выразить в HSV так, чтобы значение каждого компонента было целым. Фактически, при таком кодировании доступна только 1/256 часть цветового пространства RGB.

4.6 Масштабирование изображений средствами GDI+

Метод TranslateTransform изменяет матрицу преобразования данного графического объекта путём произведения самой себя на матрицу преобразования.

Параметры

dx

[in] Вещественное число, которое задаёт горизонтальную компоненту преобразования.

dy

[in] Вещественное число, которое задаёт вертикальную компоненту преобразования.

order

[in] Необязательный. Элемент перечисляемого типа MatrixOrder, который определяет порядок произведения матриц преобразования. Значение MatrixOrderPrepend означает, что матрица преобразования располагается слева, а MatrixOrderAppend означает, что матрица преобразования располагается справа. Значение по умолчанию MatrixOrderPrepend.

Возвращаемое значение

В случае успеха возвращает значение Ok, которое является элементом перечисления Status.

В случае ошибки возвращает одно из значений перечисления Status.

Метод ScaleTransform изменяет матрицу преобразования данного графического объекта путём произведения самой себя на матрицу масштабирования.

Параметры

sx

[in] Вещественное число, которое задаёт горизонтальный коэффициент масштабирования в матрице масштабирования.

sy

[in] Вещественное число, которое задаёт вертикальный коэффициент масштабирования в матрице масштабирования.

order

[in] Необязательный. Элемент перечисляемого типа MatrixOrder, который определяет порядок произведения матриц преобразования. Значение MatrixOrderPrepend означает, что матрица преобразования располагается слева, а MatrixOrderAppend означает, что матрица преобразования располагается справа. Значение по умолчанию MatrixOrderPrepend

Возвращаемое значение

В случае успеха возвращает значение Ok, которое является элементом перечисления Status.

В случае ошибки возвращает одно из значений перечисления Status.

4.7 Задание для самостоятельной работы

Цель. Преобразование цветовых компонентов между RGB и HSV. Двумерная визуализация пространства HSV. Масштабирование средствами GDI+.

Задание. Разработать Win32 приложение, демонстрирующее представление цветовой модели HSV в виде круговой диаграммы. При перемещении указателя мыши с нажатой левой клавишей выводить параметры текущей цветовой точки в форматах RGB и HSV. При нажатии клавиш «+», «–» производить масштабирование изображения.

Примечание:

Клавиша «+» на дополнительной клавиатуре имеет код 0x6b

Клавиша «–» на дополнительной клавиатуре имеет код 0x6d

Клавиша «Enter» как на основной так и на дополнительной клавиатуре имеет код 0x13

Последовательность выполнения

1. Создать проект Win32 с именем «Lab3»

2. Подключить GDI+

3. Создать обработчик события WM_PAINT

• объявить прототип глобальной функции OnPaint следующего вида:

void OnPaint(HWND hwnd, HDC hdc);

• описать реализацию функции OnPaint с пустым телом

• В функции WndProc добавить обработчик сообщения WM_PAINT

case WM_PAINT:

hdc = BeginPaint(hWnd, &ps);

OnPaint(hWnd, hdc);

EndPaint(hWnd, &ps);

break;

4. Создать функцию построения графического изображения

• Объявить глобальную переменную. Она будет содержать построенную цветовую модель

Bitmap *bitmap = NULL;

• Объявить прототип глобальной функции для построения цветовой модели:

void BuildBitmap(Bitmap *bmp, const int Radius);

• Описать реализацию функции BuildBitmap. Ниже в качестве примера приведён вывод точки

bmp->SetPixel(0, 0, Color(255, 0, 0));

• В функции _tWinMain, после MyRegisterClass добавить вызов созданной функции BuildBitmap

const int Radius = 150;

bitmap = new Bitmap(2*Radius, 2*Radius);

BuildBitmap(bitmap, Radius);

• Перед выходом из функции _tWinMain освободить память, выделенную для глобальной переменной.

delete Bitmap;

5. Описать реализацию функции OnPaint следующего вида:

void OnPaint(HWND hwnd, HDC hdc)

{

if (bitmap == NULL) return;

// Создаем контекст рисования и устанавливаем пиксельную систему координат

Graphics g(hwnd);

g. SetPageUnit(UnitPixel);

RECT rc;

GetClientRect(hwnd, &rc);

// Смещаем систему координат в центр области рисования главного окна

g. TranslateTransform((double)rc. right/2.0, (rc. bottom - (double)rc. top)/2.0);

// Вывод построенного изображения bitmap на экран

Pen pen(Color(0,0,255));

g. DrawImage(bitmap, Point(-(int)bitmap->GetWidth()/2, -(int)bitmap->GetHeight()/2));

// Крестик в центре изображения (для удобства разработки)

g. DrawLine(&Pen(Color(0, 0, 0), 2.0f), -40, 0, 40, 0);

g. DrawLine(&Pen(Color(0, 0, 0), 2.0f), 0, -40, 0, 40);

}

6. Построить цветовую модель HSV в обработчике BuildBitmap

7. Создать обработчик сообщения WM_MOUSEMOVE (см. пример «60 SpyTheMouse»)

8. Выводить параметры текущей цветовой точки в заголовок окна приложения

9. Создать обработчик сообщения WM_KEYDOWN для обработки нажатия клавиш «+», «–»

10. Скорректировать обработчик сообщения WM_PAINT так, чтобы построение изображения производилось в зависимости от коэффициента масштаба

5 Перемещение и анимация изображений

· создание приложения MFC

· добавление в приложение нового класса окна

· определение метода OnPaint для окна

· создание окна произвольной формы