Программирование компьютерной графики с использованием Windows GDI

GDI GDI (Graphics Device Interface) – API фирмы Microsoft для аппаратно-независимого программирования различных графических устройств Видеоадаптеры Принтеры

Эволюция GDI Изначально разработана для Windows 3.1 16-битное графическое ядро по наследству перешло и в Windows 95/98 В Window NT/2000+ используется 32-битное графическое ядро, предоставляющее больше возможностей GDI+ - это новое графическое API, появившееся в Windows XP/2003 Server Объектно-ориентированный интерфейс предоставленный в виде набора C++ классов

GDI с точки зрения программиста GDI – это библиотека, содержащая сотни функций, доступных из прикладных программ GDI32.DLL - динамически линкуемая библиотека содержащая реализацию этих функций Gdi32.lib - содержит ссылки на эти функции Wingdi.h – заголовочный файл, содержащий объявления функций, типов библиотеки GDI

Абстрагирование различных графических устройств Аппаратно-независимый API должен хорошо абстрагировать разнообразные графических устройства Предоставлять возможности всевозможных устройств Скрывать различия между различными устройствами В GDI данную абстракцию осуществляет Контекст Устройства

Многоуровневая архитектура графической подсистемы Верхний слой – клиентские API GDI, DirectDraw, Direct3D, OpenGL, GDI+ используются прикладными программами Находятся в адресном пространстве приложения Средний слой – т.н. Graphics Engine Часть ядра ОС Содержит сотни функций, используемых верхним слоем Нижний слой – драйвер устройства Осуществляет непосредственное взаимодействие с графическим устройством Используется средним слоем для доступа к устройству

Приложение GDI Graphics Engine Драйвер устройства Аппаратное устройство

Device Context - Контекст устройства Внутренняя структура данных графической системы, служащая для взаимодействия с драйвером графического устройства Обеспечивает абстракцию графического устройства Хранение информации о текущих графических атрибутах устройства – цвет, шрифт, кисти, перья и т.п., а также о текущем графическом режиме

Сокрытие деталей реализации контекста устройства Структура контекста устройства напрямую не доступна приложениям Приложение получает дескриптор (HANDLE) устройства – HDC – 32-битное значение Функции, работающие с контекстом устройства, используют данный дескриптор для идентификации контекста устройства Такой подход позволяет развивать структуру контекста устройства в новых версиях ОС, сохраняя совместимость с уже существующими приложениями – формат дескриптора недокументирован

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

Получение контекста устройства, связанного с окном Контекст устройства для рисования по всей поверхности окна GetWindowDC() Контекст устройства для рисования по клиентской области окна GetDC() GetDCEx() BeginPaint() – получение контекста устройства для рисования в области окна, требующей обновления в ответ на событие WM_PAINT

Memory Device Context Memory Device Context позволяет рисовать на растровом изображении, находящемся в памяти Часто используется для формирования изображения на «теневом экране», которое может быть отображено на графическом устройстве Создается при помощи функции CreateCompatibleDC()

Удаление контекста устройства Хранение информации о контексте устройства требует определенного объема памяти Количество контекстов устройства в системе ограничено Ставший ненужным контекст устройства, созданный при помощи CreateDC или CreateCompatibleDC, необходимо удалить при помощи функции DeleteDC()

Освобождение контекста устройства Контекст устройства полученный при помощи функций GetDC()/GetWindowDC()/GetDCEx необходимо освобождать при помощи функции ReleaseDC()

Обработка сообщения WM_PAINT LRESULT CALLBACK MainWndProc(HWND hWnd, UINT uMsg, WPARAM wParam, LPARAM lParam) { switch (uMsg) { case WM_PAINT: { PAINTSTRUCT ps; HDC dc = BeginPaint(hWnd, &ps); // выполняем рисование // ... EndPaint(hWnd, &ps); } break; // обработка остальных сообщений } }

Графические объекты GDI Для отображения графики и текста GDI использует следующие графические объекты: Bitmap – растровое изображение Brush – кисть Font – шрифт Metafile – метафайл Path – путь Pen – перо Region - регион

Bitmap Растровое изображение, имеющее определенный формат пикселей и, возможно, палитру Типы растровых изображений: DDB – device-dependent bitmap DIB – device-independent bitmap HBITMAP – дескриптор объекта «Bitmap»

Пример использования растровых изображений

Brush Графический объект, используемый GDI для заполнения внутренностей замкнутых примитивов Эллипс, многоугольник, путь Заполнение внутренней области может быть как сплошным, заштрихованным, использовать шаблон или растровое изображение HBRUSH – дескриптор объекта «кисть»

Пример использования кистей

Типы кистей

Font Шрифт – графический объект GDI, используемый для вывода текста Шрифт определяет начертание символов Типы шрифтов Растровые шрифты (определяют набор растровых изображения символов) Векторные шрифты (отрезки линий, определяющие внешний вид символов) TrueType- и OpenType-шрифты (содержат команды рисования линий и кривых) HFONT – дескриптор объекта “шрифт»

Metafile Метафайл – это массив структур переменной длины, называемых записями, хранящий информацию о командах GDI, необходимых для отображения изображения Обеспечивает лучшую независимость от графических устройств, чем bitmap Типы метафайлов: WMF – windows metafile EMF – enhanced metafile HDC – дескриптор метафайла

Пример метафайла

Path Путь – одна или несколько фигур, с заполнением внутренностей и/или обводкой Приложение может использовать пути для создания сложных векторных фигур из более простых (многоугольников, текстов, кривых и отрезков линий) HPATH – дескриптор объекта «путь»

Пример использования пути

Pen Перо – графический объект, используемый для рисования линий и кривых Типы перьев Cosmetic – задают толщину линии в единицах физического устройства Geometric – задают толщину линий в логических единицах HPEN – дескриптор объекта «Перо»

Пример использования перьев для рисования векторных примитивов

Region Регион – это прямоугольник, многоугольник, эллипс или комбинация нескольких данных фигур. Регион может быть закрашен, инвертирован, обведен, а также может быть использован для проверки попадания точки в область региона и создания областей отсечения HRGN – дескриптор объекта «регион»

Пример региона

Типы регионов

Работа с графическими объектами GDI

Принципы графического вывода в GDI Графические объекты используются для отображения графики и текста графическом устройстве Перья для рисования линий Кисти для заливки фигур Шрифты для вывода текста Растры для вывода расторых изображений И т.п. Работа с графическим устройством происходит с использованием контекста устройства – внутренней структуры GDI, скрытой от приложения за дескриптором контекста устройства

Содержимое контекста устройства В контексте устройства содержится информация как о самом устройстве, так и выбранных в нем в данный момент графических объектах Текущий шрифт Текущий регион Текущее перо И т.д.

Создание графических объектов GDI Практически всегда приложению требуется выводить графику с использованием собственных графических объектов Для создания графических объектов GDI служат функции соответствующие типу объектов CreatePen(), CreateFont(), CreateBrush(), и т.п.

Выбор графического объекта в контекст устройства Контекст устройства работает с выбранными в нем объектами Приложение выбирает нужный объект в контекст устройства при помощи функции SelectObject() Функция SelectObject также «освобождает» ранее выбранный объект данного типа и возвращает его дескриптор Один и тот же объект может быть выбран одновременно в несколько устройств По окончании графического вывода приложение должно восстановить ранее выбранные графические объекты

Удаление графических объектов Количество графических объектов в системе ограничено Объекты, ставшие ненужными, необходимо удалять при помощи функции DeleteObject() Необходимо следить за тем, чтобы объект перед своим удалением не был выбран ни в одном контексте устройства

Пример void OnPaint(HDC hdc) { // выбираем новый шрифт и сохраняем предыдущий HGDIOBJ oldFont = SelectObject(hdc, newFont); SetTextColor(hdc, RGB(70, 120, 35)); // выводим текст на экран новым цветом и шрифтом TextOut(hdc, 0, 0, “hello”, strlen(“hello”)); // восстанавливаем предыдущий шрифт SelectObject(hdc, oldFont); }

Создание анимированных изображений

Что такое анимация Анимация (мультипликация) – «оживление» изображения при помощи быстрой смены отдельных статических изображений - кадров Исходя особенностей человеческого визуального восприятия для создания эффекта плавного движения скорость смены кадров должна быть не менее 18 кадров в секунду. Для получения наиболее плавного изображения частота смены кадров должна совпадать с частотой кадровой развертки монитора

Пример анимации

Создание анимации при помощи ЭВМ Принципы те же самые, что и в кинематографе Необходимо отрисовывать на экране слегка отличающиеся изображения Построение изображений может происходить как в реальном времени, так и заранее (возможны комбинированные методы) От частоты смены кадров зависит плавность движения

Способы вывода изображений с заданной периодичностью Использование таймера Обработчик сообщения WM_TIMER инициирует перерисовку окна при помощи функции RedrawWindow() Инициирование перерисовки окна в цикле выборки сообщений Этот способ часто применяется в компьютерных играх Использование многопоточности (multi-threading) GUI-поток занимается отрисовкой результатов работы параллельно работающего потока

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

Кадр 1 Изображение на экране монитора Содержимое видеобуфера

Кадр 2 Изображение на экране монитора Содержимое видеобуфера

Кадр 3 Содержимое видеобуфера Изображение на экране монитора

На самом деле все обстоит гораздо хуже При большем количестве объектов, участвующих в анимации, мерцание становится еще более заметным Ходом построения кадровой развертки на экране монитора управлять не получится Однако выход есть Какой?

Решение данной проблемы Необходимо производить рисование во внеэкранное растровое изображение в памяти – теневом буфере кадра После полного построения изображения в теневом буфере кадра его содержимое перебрасывается на экран

Исправленный вариант Содержимое теневого буфера кадра Изображение на экране монитора Содержимое видеобуфера Кадр 1 Кадр 2 Этап 1. Построение изображения в теневом буфере Этап 2. Копирование содержимого теневого буфера в видеобуфер

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

Достоинства и недостатки GDI

Достоинства Абстрагирование от особенности работы различных графических устройств Один и тот же код может с легкостью производить вывод на различные графические устройства Данная особенность сделала GDI основным инструментом программирования пользовательского интерфейса Windows

Недостатки Огромное количество функций усложняет изучение данного API Отсутствие сглаживания векторных примитивов, растровых изображений и шрифтов Слабые возможности по работе с полупрозрачными изображениями Отсутствие поддержки изображений в формате, отличном от BMP и WMF/EMF Управление ресурсами целиком возложено на программиста, а не на библиотеку За универсальность пришлось заплатить низким быстродействием, что сделало GDI малопригодным для динамических приложений

Программирование графики с использованием GDI+

Что такое GDI+ Объектно-ориентированная библиотека для вывода графики Представлена в виде нескольких десятков классов на С++ Появилась начиная с Windows XP Доступна в виде redistributable packages для Windows 98/ME/NT4/2000

Достоинства и недостатки GDI+ Достоинства Улучшены возможности по работе с текстом, векторной и растровой графикой Вместо сотен функций GDI+ предоставляет несколько десятков хорошо спроектированных C++ классов Большая часть работы по управлению ресурсами возложена на библиотеку и компилятор Разработчики рекомендуют использовать GDI+ вместо GDI в новых программах Недостаток – низкая производительность Универсальность и в этот раз делает GDI+ малопригодной для создания динамических приложений

Применение GDI+ Двумерная векторная графика Обработка растровых изображений Вывод текстов

Новые возможности GDI+

Градиентные кисти В GDI+ появилась поддержка кистей с градиентной заливкой Градиент применяется для заполнения внутренностей замкнутых фигур и путей

Фундаментальные сплайны (Cardinal Splines) Cardinal spline – последовательность отдельных кривых, соединенных в виде одной кривой Такие сплайны проходят через заданные точки, не образуя острых углов

Независимые объекты путей (Independent Path Objects) В GDI путь относится к контексту устройства и после своего рисования путь уничтожается В GDI+ рисование выполняется при помощи объекта Graphics, в то время как пути хранятся в объектах GraphicsPath Это дает возможность рисования одного и того же объекта GraphicsPath несколько раз

Трансформации и матрицы GDI+ предоставляет класс Matrix, упрощающий повороты, переносы, масштабирование объектов, а также их комбинирование На рисунке показан результат применения двух трансформаций к пути (масштабирование и поворот)

Трансформации регионов GDI+ позволяет применять матричные преобразования к регионам Это дает возможность их масштабирования, поворота и переноса

Смешивание цветов и полупрозрачность GDI+ позволяет задать прозрачность заливки или линий при выводе графики

Долой дескрипторы и контексты устройств! GDI+ предоставляет пользователю класс Graphics, инкапсулирующий работу с графикой Как и контекст устройства он связан с определенным окном Однако он не связан с кистью, перьями и шрифтами Нужные объекты GDI+ передаются в методы рисования класса Graphics

Рисование линии при помощи GDI HDC hdc; PAINTSTRUCT ps; HPEN hPen; HPEN hPenOld; hdc = BeginPaint(hWnd, &ps); hPen = CreatePen(PS_SOLID, 3, RGB(255, 0, 0)); hPenOld = (HPEN)SelectObject(hdc, hPen); MoveToEx(hdc, 20, 10, NULL); LineTo(hdc, 200, 100); SelectObject(hdc, hPenOld); DeleteObject(hPen); EndPaint(hWnd, &ps);

Рисование линии при помощи GDI+ (вариант 1) HDC hdc; PAINTSTRUCT ps; Pen* myPen = NULL; Graphics* myGraphics = NULL; hdc = BeginPaint(hWnd, &ps); // создаем перо и объект Graphics и рисуем линию myPen = new Pen(Color(255, 255, 0, 0), 3); myGraphics = new Graphics(hdc); myGraphics->DrawLine(myPen, 20, 10, 200, 100); // Удаляем ставшие ненужными объекты GDI+ // (это нужно сделать до вызова EndPaint()) delete myGraphics; delete myPen; EndPaint(hWnd, &ps);

Рисование линии при помощи GDI+ (вариант 2) HDC hdc; PAINTSTRUCT ps; hdc = BeginPaint(hWnd, &ps); { // фигурные скобки нужны, чтобы объект Graphics // уничтожился до вызова EndPaint() Pen myPen(Color(255, 255, 0, 0), 3); Graphics myGraphics(hdc); myGraphics.DrawLine(&myPen, 20, 10, 200, 100); } EndPaint(hWnd, &ps);

Кисти, перья, пути, изображения и шрифты – теперь параметры методов Объекты GDI+ создаются и хранятся отдельно от класса Graphics. Методы класса Graphics, выполняющие рисование, принимают указатель на нужный им объект Это несколько упрощает работу с ресурсами

Перегрузка методов Многие методы GDI+ перегружены, т.е. имеют одно имя, но различные списки параметров Программист может использовать более удобный в конкретной ситуации способ вызова метода

Прочие улучшения Отказ от текущей позиции рисования линий Методы рисования линий принимают начальную и конечную точки Нет необходимости в MoveTo/LineTo Отделение методов рисования от методов заливки DrawRectangle и FillRectangle Цвет в GDI+ имеет Alpha составляющую, задающую прозрачность Упрощение создания и комбинирования регионов

Поддержка различных форматов изображений GDI+ предоставляет классы Image, Bitmap и Metafile для загрузки, сохранения и обработки изображений различных форматов BMP GIF JPEG Exif TIFF ICON WMF EMF Поддержки данных форматов раньше приходилось реализовывать самостоятельно либо использовать сторонние библиотеки

Программирование с помощью GDI

Поддержка векторной графики в GDI+ Средства для рисования примитивов Линии, кривые, фигуры, представленные набором точек в некоторой системе координат Классы для хранения информации о примитивах, о способе их отображения и классы, выполняющие рисование

Работа с растровыми изображениями в GDI+ Загрузка и сохранение растровых изображений различных форматов BMP GIF JPEG/JFIF PNG TIFF

Поддержка метафайлов в GDI+ Метафайл – изображение, которое хранится как последовательность команд рисования и изменения настроек рисования GDI+ поддерживает следующие форматы метафайлов WMF (только чтение) EMF (чтение и запись) EMF+ (чтение и запись) EMF+ Only EMF+ Dual

Рисование линий, кривых и фигур

Рисование линий Для рисовании линии необходимо создать объекты Graphics и Pen Метод DrawLine объекта Graphics выполняет рисование линии заданным пером: myGraphics.DrawLine(&myPen, 4, 2, 12, 6);

Рисование прямоугольника Для рисования прямоугольника служит метод DrawRectangle объекта Graphics myGraphics.DrawRectangle(&myPen, 100, 50, 80, 40); Rect myRect(100, 50, 80, 50); myGraphics.DrawRectangle(&myPen, myRect)

Рисование эллипса Для рисования эллипса служит метод DrawEllipse myGraphics.DrawEllipse(&myPen, 100, 50, 160, 80); Rect myRect(100, 50, 160, 80); myGraphics.DrawEllipse(&myPen, myRect);

Рисование многоугольников Для рисования многоугольников служит метод DrawPolygon Point myPointArray[] = {Point(0, 0), Point(50, 30), Point(30, 60)}; myGraphics.DrawPolygon(&myPen, myPointArray, 3);

Антиалиасинг Антиалиасинг позволяет уменьшщить ступенчатость при отображении векторных примитивов на растровом дисплее myGraphics.SetSmoothingMode(SmoothingModeAntiAlias); myGraphics.DrawLine(&myPen, 0, 0, 12, 8);

Работа с растровыми изображениями

Загрузка растрового изображения Загрузка растрового изображения из файла при помощи GDI+ выполняется очень просто – достаточно передать имя файла в конструктор класса Bitmap Bitmap myBitmap(L"Spiral.png"); Важное замечание - загрузка изображения из файла занимает некоторое время Для многократного рисования изображения нужно сохранить его после создания в переменной, а не загружать каждый раз заново

Рисование растрового изображения Для рисования растрового изображения служит команда DrawImage Пример: myGraphics.DrawImage(&myBitmap, 10, 10);

Вывод текста

Создание шрифта Для создания шрифта необходимо указать семейство шрифта, размер, стиль и единицы измерения FontFamily fontFamily(L"Arial"); Font font(&fontFamily, 16, FontStyleRegular, UnitPixel);

Вывод текста Для вывода текста служит метод DrawString объекта Graphics FontFamily fontFamily(L"Times New Roman"); Font font(&fontFamily, 24, FontStyleRegular, UnitPixel); PointF pointF(30.0f, 10.0f); SolidBrush solidBrush(Color(255, 0, 0, 255)); graphics.DrawString(L"Hello", -1, &font, pointF, &solidBrush);

И это далеко не все! Это был лишь краткий обзор базовых возможностей GDI+ Подробное описание возможностей GDI+, классов и методов данной библиотеки можно найти в MSDN

Ссылки http://msdn.microsoft.com/en-us/library/ms533798%28VS.85%29.aspx http://www.bobpowell.net/