Chapter2: Drawing a Window. The Windows GDI 3 GDI(Graphics Device Interface) –A part of the...

Chapter2: Drawing a Window

Chapter 2: Drawing a Window

The Windows GDI

3

The Windows GDI

• GDI(Graphics Device Interface)– A part of the Operating System. – Translate the applications’ signals into the

hardwares’ signal.– Determine whether it is shown or not.

Applications GDIOutput Hardwares(Monitor or printer)

Devide-Independent

Device-Dependent

4

GDI and Device Context

• Device Context (DC)– Data structure for information about displaying– It determines how to display in Multi-tasking GUI

environment.

CDC: MFC Device Context Class

A package for displaying:(physical hardware information,Many functions for drawing)

CDC: MFC Device Context Class

A package for displaying:(physical hardware information,Many functions for drawing)

≒ A canvas and tools ready to draw

≒ A canvas and tools ready to draw

5

How to draw in Windows

• Procedure (step-by-Step)1. Application: Requires Device Context

Windows(GDI): Creates a DC and returns its handle

2. Application: Draws on the DCWindows(GDI): Checks the availability and displays the drawing if possibleCDC* pDC = GetDC (); // require DC // Do some drawing ReleaseDC (pDC); // release D

C

CDC* pDC = GetDC (); // require DC // Do some drawing ReleaseDC (pDC); // release D

C

CDC DC(this); // require DC // Do some drawing CDC DC(this); // require DC // Do some drawing

or

Using pointer

Using class

6

Various kinds of Device Context

Class Name Description

CPaintDC For drawing in a window's client area (OnPaint handlers only)

CClientDC For drawing in a window's client area (anywhere but OnPaint)

CWindowDC For drawing anywhere in a window, including the nonclient area

CMetaFileDC For drawing to a GDI metafileClass Hierarchy

Drawing test using PaintDC

• Where you should put your drawing code?– In the WM_PAINT message handler ==

OnPaint()void CMainWindow::OnPaint() {

CPaintDC dc(this); dc.Rectangle(50,50,250,250);dc.Ellipse(100,100,200,200);

}

void CMainWindow::OnPaint() {

CPaintDC dc(this); dc.Rectangle(50,50,250,250);dc.Ellipse(100,100,200,200);

}

WM_PAINT??

• WM: Windows Message – A set of the basic messages predefined by MFC– Usually regarding to the creation/changing of the

windows, mouse controlling, and keyboard typing

• WM_PAINT– A signal from windows that it is time to update

the screen: an “invalid region” happens– When:

• A windows is popping up (when creating or maximizing)• Another window which blocked the window is moving

out.• The user (or application) demands it

9

WM_PAINT – Invalid Region

• When it is no longer valid:

10

WM_PAINT from yourself

• You may need to update the screen when the contents change

• You can make Windows to send WM_PAINT message to your application

– Make the screen invalid == Invalidate

void CWnd::Invalidate (BOOL bErase = TRUE);void CWnd::Invalidate (BOOL bErase = TRUE);

Chapter 2: Drawing a Window

Drawing with the GDI

12

Member functions of the CDC

• Drawing shapes

dc.Rectangle (x1, y1, x2, y2);dc.Ellipse (x1, y1, x2, y2);

(x1, y1)

(x2, y2)

Function name function

Rectangle() Drawing a rectangle

Ellipse() Drawing an ellipse

Code Practice

1. When the left mouse button is clicked, Draw a rectangle at the position of the mouse click

How to add Windows Event Handler

• Using CMainWindow’s Properties window:

Adding Window Messages

15

Drawing Functions of CDC (1/3)

• Point

Same with the SetPixel, but it does not return the original color value. So it is more efficient.

SetPixelV

Set the given color value at the position and return the original color value at the position

SetPixel

Get the color value at the given position. GetPixel

DescriptionName

COLORREF color = dc.GetPixel (x,y);dc.SetPixelV(x,y, RGB(r,g,b));COLORREF color = dc.GetPixel (x,y);dc.SetPixelV(x,y, RGB(r,g,b));

16

COLORREF

• A data type for storing a color value

• 32 bit as 0x00rrggbb

• Macro function easy to use:

COLORREF color = RGB(r,g,b);r = GetRValue (color);g = GetGValue (color);b = GetBValue (color);

COLORREF color = RGB(r,g,b);r = GetRValue (color);g = GetGValue (color);b = GetBValue (color);

Drawing test:

18


• Drawing shapes

dc.Rectangle (x1, y1, x2, y2);dc.Ellipse (x1, y1, x2, y2);

(x1, y1)

(x2, y2)

Function name Description

Rectangle() Drawing a rectangle

Ellipse() Drawing an ellipse

void GetClientRect(CRect)

• How to get the window size?

• CRect : a class for storing a rectangle information– member variables:

• bottom• top• right• left

CRect rect;GetClientRect(rect);CRect rect;GetClientRect(rect);

(left, top) (right, top)

(right, bottom)(left, bottom)

http://msdn2.microsoft.com/ko-kr/library/zzs00fs6(VS.80).aspx

void GetClientRect(CRect)

• Practice: draw an ellipse fit to the client area

CRect rect;GetClientRect(rect);CRect rect;GetClientRect(rect);

21


• Drawing a Line

Drawing a line from the original position to the given position

LineTo()

Move your pen to the given positionMoveTo()

DescriptionName

dc.MoveTo(x1,y1);dc.LineTo(x2,y2);dc.MoveTo(x1,y1);dc.LineTo(x2,y2);

(x1,y1)

(x2,y2)

Coding practice

23

Drawing a Text by using CDC

• Text-related functions

Sets alignment parameters SetTextAlign()

Sets the background colorSetBkColor()

Sets the text output colorSetTextColor()

Draws text in a formatting rectangleDrawText()

Outputs a line of test at the positionTextOut()

DescriptionFunction Name

dc.SetTextColor(RGB(255,0,0));dc.SetBkColor(RGB(0,255,0));dc.SetTextAlign(TA_CENTER);dc.TextOut(300,200,_T(“Sejong University”));

dc.SetTextColor(RGB(255,0,0));dc.SetBkColor(RGB(0,255,0));dc.SetTextAlign(TA_CENTER);dc.TextOut(300,200,_T(“Sejong University”));

http://msdn2.microsoft.com/ko-kr/library/e37h9k5s(VS.80).aspx

Coding Test

CRect rect;GetClientRect(rect);

dc.SetTextColor(RGB(255,0,0));dc.SetBkColor(RGB(255,255,0));dc.DrawText(CString(_T(“Draw Text Test”)), &rect, DT_CENTER|DT_VCENTER|DT_SINGLELINE);

dc.SetTextAlign(TA_CENTER);dc.TextOut(300,200,CString(_T("Welcome“)));




Coding Test







Output text

The text will be placed in the rectangle

Text Alignment

x y Output text

Chapter2: Drawing a Window. The Windows GDI 3 GDI(Graphics Device Interface) –A part of the...

Documents

Transcript of Chapter2: Drawing a Window. The Windows GDI 3 GDI(Graphics Device Interface) –A part of the...