Глава 10.
Рисуем графические объекты
Вы умеете рисовать? Очень жаль.
Я, к сожалению, тоже не умею...
А буквы вы умеете? Тоже не умеете? Совсем нехорошо...
Остап Бендер
Теперь, когда мы подготовили наше приложение и познакомились с особенностями
рисования в Windows на основе библиотеки MFC, можно приступать непосредственно к
"рисованию" наших часов.
В главе 8 мы остановились на том, что создали функцию CChildWnd::Redraw, не наполнив ее никаким
содержимым. Пора восполнить этот пробел.
Сам по себе алгоритм достаточно прост:
1. Проверим, не свернуто ли окно — нет смысла рисовать, если все равно никто
ничего не увидит.
2. Поскольку мы реализовали механизм перерисовки содержимого окна во время
"простоя" приложения, то вполне возможна ситуация, когда текущее время еще не
успело измениться. Очевидно, что и в этом случае незачем заниматься
перерисовкой.
3 Получим доступ к контексту клиентской области окна — без него мы ничего
нарисовать не сможем.
4. Установим систему координат, относительно которой мы будем рисовать.
5. Теперь нарисуем циферблат.
6. Нарисуем стрелки "по старому месту" — перед выводом нового значения
времени необходимо стереть старые стрелки.
7. Поскольку надписи на циферблате могут перекрываться стрелками, то обновить
их можно только теперь.
8. Выводим стрелки по их новому месту.
9. Осталось только "прибрать за собой" — восстановить измененные параметры
контекста устройства и записать новое значение текущего времени.
Вот, собственно, и все. Посмотрите, как это выглядит в коде:
// Функция перерисовки часов
может вызываться
// практически в любом месте
программы
//
void
CChildWnd::Redraw()
{
static CTime m_tmPrev; //
переменная статическая,
// поэтому ее значение не
будет изменяться
// между вызовами
функции
// Если окно свернуто, нет
необходимости что-либо перерисовывать
if (IsIconic())
return;
// Поскольку мы рисуем часы —
без получения текущего времени
// нам не
обойтись
CTime tmCurrent =
CTime::GetCurrentTime();
// Моменты времени, когда мы
будем рисовать, у нас произвольные,
// поэтому сначала
проверяем, изменились ли текущие значения
if (tmCurrent !=
m_tmPrev)
{
// Получаем доступ к
.контексту клиентской области окна
CClientDC dc(this);
// Устанавливаем нашу систему
координат
SetMode(Sdc);
// Рисуем циферблат
DrawClock(sdc);
// Закрашиваем цветом фона
ранее выведенные стрелки,
// другими словами — стираем
их
CPen *pPen =
dc.SelectObject(&m_wndPen);
CBrush *pBrush =
dc.SelectObject(&m_wndBrush);
DrawArrows(&dc,
m_tmPrev);
// Выводим текст
надписей
DrawLabel(&dc);
// Выводим стрелки по их
новому месту
dc.SelectObject(&m_amPen);
dc.SelectObject(&m_amBrush);
DrawArrows(&dc,
tmCurrent);
// Восстанавливаем параметры
контекста устройства,
// которые у него были перед
тем, как мы их начали менять
dc.SelectObject(pBrush);
dc.SelectObject(pPen);
} .
// Изменяем значение текущего
времени
m_tmPrev = traCurrent;
}
А мне осталось только привести некоторые комментарии.
Проверка того, что окно свернуто
Для проверки "состояния" окна — не свернуто ли оно, мы воспользовались
функцией класса CWnd — CWnd::IsIconic,
которая возвращает TRUE,
если окно свернуто, и FALSE — в
противном случае.
Установка системы координат
Для установки системы координат я реализовал функцию SetMode. код которой приведен ниже:
// Функция формирования
системы координат
//
void
CChildWnd::SetMode(CDC *pDC)
// Устанавливаем
масштаб, начало и направление
// координатных
осей
pDC->SetMapMode(MM_ISOTROFIC);
pDC->SetWindowExt(1000, 1000);
pDC->SetViewportExt
(m_cxCIier.t / 2, -m_cyCIier.t / 2) ;
pDC->SetViewportOrg(m_cxClient / 2, m_cyCIier.t / 2);
Прежде всего необходимо установить режим отображения:
pDC:->SetMapMode(MM_ISOTROPIC) ;
Почему выбран именно этот режим — MM_ISOTROPIC? Причина должна быть вам уже понятна: в этом случае
по осям х и у устанавливается одинаковая размерность.
Далее задаем размеры логической
pDC->SetWindowExt (1000,
1000);
и физической областей вывода
pDC->SetViewportExt
(m_cxCiient; / 2, -m_cyClient / 2) ;
Знаак "минус" у второго параметра сообщает, что ось у будет направлена вверх.
И, наконец, начало физических координат помещаем в центр окна:
pDC->SetViewportOrg(m_cxClient / 2, m_cyClient /2);
В результате начало координат — в середине клиентской области окна, ось х
направлена влево, ось у — вверх, а размер окна — 2000x2000 логических
единиц:
X: [-1000;
+1000]
Y: [-1000;
+1000]
Рисование циферблата часов
Аналогично следует поступить (т. е. реализовать отдельную функцию, чтобы не
загромождать код) и с функцией для рисования циферблата часов — CChildWnd::DrawClock. Но сначала о том, что мы
собираемся делать (я не буду описывать необходимые для реализации нашего замысла
математические выкладки — это выходит за рамки поставленных задач):
1. Нарисовать отметки для каждого часа, причем для 12, 3, 6 и 9 часов будем
рисовать прямоугольники со скругленными углами, а для остальных — круги.
2. Нарисовать дуги между часовыми отметками. Их диаметр следует сделать
немного больше диаметра окружности, на которой расположены часовые отметки.
3. Нарисовать "углы" часов. Для демонстрации различных подходов сделаем это
тремя способами.
А вот и программная реализация описанного алгоритма:
// Функция рисования
циферблата часов
//
void CChildWnd:rDrawClock(CDC
*pDC)
{
CPen *pPen;
CBrush *pBrush;
int nAngle;
// Рисуем отметки для каждого
часа,
// причем для 12-ти, 3-х,
6-ти и 9-ти часов
// отметки —
прямоугольники,
// для остальных —
круги
//
// Выбираем в контекст
устройства кисть, созданную для циферблата,
pBrush =
pDC->SelectObject(&m_clkBrush);
//и шрифт для названия
часов
CFont *pFont =
pDC->SelectObject (&m__Font_l) ;
// Рисуем отметки для каждого
часа
for (nAngle = 0; nAngle <
360; nAngle += 30)
{
// He буду загромождать текст
пояснениями математических
// выкладок — примите на веру
или проверьте самостоятельно
POINT pt[2] = ( 0, 900
);
POINT pt[l] = (0,
850);
// Поскольку вращение точек
необходимо в разных местах,
// выделяем это действие в
отдельную функцию
RotatePoint(pt, 1,
nAngle);
int x = (nAngle % 18C) ? 70 :
250;
int у = ((nAngle+90) % 180) ?
70 : 250;
pt[0].x -= x / 2;
pt[0].y -= у / 2;
pt[l].x = pt[0].x + x;
pt[1].y = pt[0].y + y;
// В обеих использованных
ниже функциях pt[0] и pt[l] задают
// размеры ограничивающего
фигуру прямоугольника
if (nAngle % 90)
// Для 12, 3, 6 и 9 часов
рисуем круги
pDC->Ellipse(pt[0].x,
pt[0].y, pt[l].x, pt[l].y);
else
// для остальных —
скругленные прямоугольники
pDC->RoundRect(pt[0].x,
pt[0].y, pt[l].x, pt[l].y,
min(x, y) / 2, min(x, y) / 2)
;
}
// Рисуем дуги между часовыми
отметками
// так, чтобы их диаметр был
немного
// больше диаметра
окружности, на которой расположены
// часовые
отметки
//
// Для рисования дуг между
часовыми отметками
// выбираем в контекст
устройства специальный карандаш
pPen =
pDC->SelectObject(&m_rndPen);
POINT ptPrev;
// Опять опускаю
математическое обоснование
for (nAngle = -30; nAngle
< 360; nAngle += 30)
{
POINT pt[2] = { -45, 950, 45,
950 };
RotatePoint(pt, 2,
nAngle);
if (nAngle != -30)
// Рисуем дугу, радиус
которой, как мы договорились,
// несколько меньше радиуса
окружности, где расположены
// часовые
отметки
pDC->Arc(-980, -980, 980,
980,
pt[0].x, pt[0].y, pcPrev.x,
ptPrev.y);
ptPrev = pt[1];
}
// Рисуем "углы" часов,
причем тремя различными способами
//
CRect round(-1100, -1100,
1100, 1100);
CRgn rgn; CRect
rect;
// Для рисования "углов"
выбираем в контекст устройства
// специальные карандаш и
кисть
pDC->SelectObject(&m_crnPen);
pDC->SelectObject(&m_crnBrush);
// 1-й способ:
// Рисуем левый верхний
угол
//
rect = CRect(-950, 950, -550,
550);
// Преобразуем логические
координаты прямоугольника в физические
pDC~>LPtoDP(&rect);
// Формируем область
отсечения,
// для чего нужны координаты
в единицах
// устройства вывода
rgn.CreateRectRgnlndirect(&rect);
// Выбираем сформированный
регион в контекст устройства
pDC->SelectObject(srgn);
// Рисуем замкнутую дугу
(круг), но выводится
// только ее часть в
соответствии с заданной
// областью отсечения
pDC->Arc(&round,
CPoint(0, 0), CPoint(0, 0));
// Добавляем две линии
для формирования
// замкнутого
контура
pDC->MoveTo(-550,
950);
pDC->LineTo(-950,
950);
// Поскольку функция LineTo
не изменяет значение текущих
// координат, сразу можно
рисовать обе линии
pDC->LineTo(-950,
550);
// Делаем доступной для
рисования всю клиентскую часть окна
pDC->SelectClipRgn(NULL);
// До сих пор был
задействован только текущий карандаш,
// теперь же в дело вступает
текущая кисть
// Заполняем замкнутую
область
// с внутренней точки до
границы
pDC->ExtFloodFill(-900,
900, COLOR_CRNER, FLOODFILLBORDER);
// Рисуем правый
верхний угол,
// здесь все действия
аналогичны предыдущим.
// Рисуем дугу и две линии
для формирования
// замкнутого контура
pDC->Arc(&round,
CPoint(950, 550),
CPoint(550, 950));
pDC->MoveTo(550, 950);
rDC->LineTo(950, 950);
pDC->LineTo(950, 550);
// Заполняем замкнутую
область, заданную цветом
// внутренней точки
pDC->ExtFioodFill(900,
900, COLOR_BCKGR, FLOODFILLSURFACE);
//2-й способ:
// Рисуем правый нижний
угон
// Создаем два
региона:
// первый — прямоугольный, в
него вписан
// радиус окружности
rect = CRect(550, -950, 950,
-550);
DRgn rgnl;
rgnl . CreateRectRgnlndirect
(Srect) ;
// второй — эллиптический, он
как раз
// равен окружности
CRect rect2 = round;
CRgn rgn2;
rgn2.CreateEllipticRgnlndirect(&rect2);
// На основе полученных
регионов создаем
// комбинированный с нужной
нам формой и ...
rgn.CombineRgn(Srgnl,
&rgn2, RGN_DIFF);
// ... закрашиваем его
pDC->PaintRgn(&rgn);
// Убираем за собой
rgri.DeleteObjetc ( )
;
rgr1.DeleteObjetc ( )
;
rgr2.DeleteObjetc ( )
;
// 3-й способ:
// Рисуем левый нижний
угол,
// с помощью контура и кривых
Безье
// начинаем формирование
контура
pDC->BeginPath();
// Массив точек для
рисования
// кривой Безье POINT
pt[] = {
-950, -550,
-950, -670,
-670, -950,
-550, -950 г .'
// "Рисуем" кривую Безье, т.
к. другие
// функции рисования гладких
кривых
//не фиксируются в
контуре
pDC->PolyBezier(pt,
4);
// Добавляем две линии для
формирования
// замкнутого контура,
аналогично первым двум способам
pDC->MoveTo(-950,
-550);
pDC->LineTo(-950,
-950);.
pDC->LineTo(-550,
-950);
pDC->EndPath();
// Закрашиваем
пространство, ограниченное
// сформированным
контуром pDC->FillPath();
// Мы нарисовали все, что
хотели, поэтому
// восстанавливаем параметры
контекста устройства
pDC->SelectObject(pPen);
pDC->SelectObject(pBrush);
}
Приведенный код функции DrawClock я снабдил большим числом комментариев,
которые, надеюсь, избавили меня от необходимости в каких-либо дополнительных
пояснениях.
Нам осталось рассмотреть всего два момента: обновление надписей на циферблате
и рисование стрелок.
Вывод текста
Как вы помните, мы предусмотрели три различных шрифта для надписей' на
циферблате часов. Один (самый крупный) будем использовать для названия, второй
(средний) — для надписи о том, что это кварцевые часы, и третий — для вывода
некоторой дополнительной информации. Но перейдем непосредственно к коду:
// Функция рисования строк
текста на циферблате
//
void CChildWnd:rDrawLabel(CDC
*pDC)
{
// Надписи будем выводить по
центру
pDC->SetTextAlign(TA_CENTER);
// Первые две строки рисуем
так, чтобы
// промежутки заполнялись
цветом фона
COLORREF color =
pDC->SetBkColor(COLOR_BCKGR);
// Выбираем в контекст
устройства шрифт для надписи
CFont *pFont =
pDC->SelectObject(&m_Font_l);
// ... и выводим ее в
окно
// (текст задаем
непосредственно в параметре)
pDC->TextOut(0, 480,
_Т("Петербург"), 9);
// Для вывода надписи о
том,
// что часы кварцевые,
используем другой способ
// Получаем параметры
текущего шрифта
TEXTMETRIC tm;
pDC->GetTextMetrics(&tm);
// Выбираем в контекст
устройства соответствующий шрифт
pDC->SelectObject(&m_Font_2);
// Выводим надпись, сместив
ее на расстояние,
// равное сумме высоты
символов и размера
// области между строками
текста
// (все величины взяты для
предыдущего шрифта)
pDC->ExtTextOut(0,
480-(tm.tmHeight+tm.tmExternalLeading),
ETO_OPAQUE, NULL),
_T("Кварцевые"), 9,
NULL);
// Восстанавливаем в
контексте устройства цвет фона
pDC->SetBkColor(color!;
// Последнюю строку
рисуем так, чтобы
// промежутки между
контурами символов
// оставались без изменения —
цвет
// фона влияния на эти
области не оказывает
pDC->SetBkMode(TRANSPARENT);
// Выбираем в контекст
устройства соответствующий шрифт pDC->SelectObject{&m_Font_3);
// и выводим его в
окно
pDC-XTextOut(О, -5СО,
_Т("Противоударные";);
// Восстанавливаем
"старый" шрифт
pDC->SelectObject(pFont);
}
На мой взгляд, и здесь от меня не требуется дополнительных комментариев.
Рисование стрелок
Для рисования стрелок я использовал функцию класса CDC — Polygon. Это
единственное место, которое отвечает за отображение. Весь остальной код — это
подготовка к выводу трех многоугольников.
// Функция вывода стрелок
установленными вне
// ее текущими карандашом и
кистью
//
void
CChildWnd::DrawArrows(CDC *pDC, CTime &tm)
{
// Массив точек, которые
определяют контуры стрелок
static POINT pt[3][ll]
=
{
// часовая стрелка
.
О, -50, -50, 0, -5, 40, -5,
100, -30, 120,
О, 600, 30,
120, 5, 100, 5, 40, 50, 0, 0,
-50, .
// минутная
стрелка
О, -40, -40, 0, -5, 30, -5,
90, -20, 110,
О,' 800, - .
20, 110, 5, 90, 5, 30, 40, 0,
0, -40,
// секундная
стрелка
О, -100, -5, -100, -5, -100,
-5, -100, -5, -100,
О, 850,
5, -100, 5, -100, 5, -100, 5,
-100, 0, -100
};
double
nAngle[3];
// Вычисляем углы поворота
каждой из трех стрелок
// в зависимости от текущих
значений часов, минут и секунд
nAngle[0] = (tm.GetHour() *
30) % 360 + tm.GetMinute() / 2;
nAngle[l] = (tm.GetMinute() *
60 + tm.GetSecond ()) / 10.0;
nAngle[2] = (tm.GetSecond() *
6);
// Чтобы не "потерять"
исходные значения стрелок,
// создаем временный массив
POINT ptTemp[3][11] ;
memcpy(ptTemp, pt,
sizeof(pt)); for (int i = 0; i < 3; i++)
{
// Вычисление текущих
координат всех точек // контура стрелки
RotatePoint(ptTemp[i], 11,
nAngle [i]);
// Рисование стрелки
pDC->Polygon(ptTemp[i],
11);
}
}
Вот пока и все, что я хотел вам рассказать о выводе на экран графической
информации. Естественно, что тема еще не закончена, и мы к ней обязательно
вернемся. А сейчас перейдем к рассмотрению дополнительных возможностей
взаимодействия пользователя и приложения.
