Chapter2: Drawing a Window

Chapter 2: Drawing a Window

Drawing with the GDI

3

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

Descriptionfunction

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));

4

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:

6

Drawing Functions of CDC (2/3)

• Drawing shapes

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

(x1, y1)

(x2, y2)

Function 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);

More shapes of CDC (2/3)

Function Description

Chord Draws a closed figure bounded by the intersection of an ellipse and a line

Ellipse Draws a circle or an ellipse

Pie Draws a pie-shaped wedge

Polygon Connects a set of points to form a polygon

Rectangle Draws a rectangle with square corners

RoundRect Draws a rectangle with rounded corners

10

Drawing Functions of CDC (3/3)

• Drawing a Line

Drawing a line from the original position to the given position

LineTo()

Move your pen to the given positionMoveTo()

Descriptionfunction

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

(x1,y1)

(x2,y2)

Coding practice

More line functions(3/3)Function Description

MoveTo Sets the current position in preparation for drawing

LineTo Draws a line from the current position to a specified position and moves the current position to the end of the line

Polyline Connects a set of points with line segments

PolylineTo Connects a set of points with line segments beginning with the current position and moves the current position to the end of the polyline

Arc Draws an arc

ArcTo Draws an arc and moves the current position to the end of the arc

PolyBezier Draws one or more Bézier splines

PolyBezierTo Draws one or more Bézier splines and moves the current position to the end of the final spline

PolyDraw Draws a series of line segments and Bézier splines through a set of points and moves the current position to the end of the final line segment or spline

13

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")));

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

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“)));

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“)));

Output text

The text will be placed in the rectangle

Text Alignment

x y Output text

Text Color related functions

Attribute Default

Text color

black

BackgroundColor

white

Background color mode

OPAQUE TRANSPARENT

Get with

GetTextColor()

GetBkColor()

GetBkMode()

Set with

SetTextColor()

SetBkColor()

SetBkMode()

Drawing with GDI

• An Initial Rectangle:

• How to change the color and attributes?

– Changing the Pen : LINE– Changing the Brush : FACE

18

GDI Objects (1/3)

• GDI Objects (class)– Tools for drawing with the GDI – Changing the attributes of the shapes

tool usage Class name

pen When drawing a line CPen

brush When filling a region CBrush

font When printing out a text CFont

bitmap When filling a region with an image

CBitmap

region When defining a polygonal region CRgn

19

GDI Objects(2/3)

• Class hierarchy

20

GDI Objects (3/3)

• When you draw an image (in real world):

1.Choosing a pen

2.Grabbing the pen

3.Drawing an image

4.Releasing the pen

21

GDI Objects (3/3)

• When you draw an image (by using GDI)

1.Defining a tool (pen)

2.Assigning the tool to the DC (CDC::SelectObject())

3.Drawing an image

4.(Releasing the tool from the DC)

22

CPen (1/2)

• How to use:

• Pen Style

// method 1CPen pen(PS_SOLID, 2, RGB(255, 0, 0)); // using

constructor

// or method 2CPen pen;pen.CreatePen (PS_SOLID, 2, RGB (255, 0, 0)); // using

initializer

Style width color

CPen (2/2)

• Coding Example

CPaintDC dc(this);CPen pen(PS_SOLID, 1, RGB(0, 0, 255));dc.SelectObject(&pen);dc.Rectangle(100, 100, 200, 200);

CPaintDC dc(this);CPen pen(PS_SOLID, 1, RGB(0, 0, 255));dc.SelectObject(&pen);dc.Rectangle(100, 100, 200, 200);

24

CBrush (1/2)

• A Brush defines how to fill a region

• Different kinds of the brush (by using different constructor)

Various Brushes Example

Solid brush: filling with a color

CBrush brush(RGB(255, 0, 0));

Hatch brush: filling with a pattern

CBrush brush(HS_DIAGCROSS, RGB(255, 0, 0));

Bitmap brush: filling with an image

CBitmap bitmap;bitmap.LoadBitmap(IDB_BITMAP1);CBrush brush(&bitmap);

CBrush (2/2)

• Coding ExampleCPaintDC dc(this); CBrush brush(RGB(255, 0, 0));dc.SelectObject(&brush);dc.Ellipse(100, 100, 200, 200);

CPaintDC dc(this); CBrush brush(RGB(255, 0, 0));dc.SelectObject(&brush);dc.Ellipse(100, 100, 200, 200);

CPaintDC dc(this); CBrush brush(HS_DIAGCROSS, RGB(255, 0, 0));dc.SelectObject(&brush);dc.Ellipse(100, 100, 200, 200);

CPaintDC dc(this); CBrush brush(HS_DIAGCROSS, RGB(255, 0, 0));dc.SelectObject(&brush);dc.Ellipse(100, 100, 200, 200);

26

CFont (1/2)

• How to use1. Create a CFont variable2. Call CreateFont() function

CFont font;font.CreateFont(...);// font.CreateFontIndirect(...);// font.CreatePointFont(...);// font.CreatePointFontIndirect(...);

CFont font;font.CreateFont(...);// font.CreateFontIndirect(...);// font.CreatePointFont(...);// font.CreatePointFontIndirect(...);

27

CFont (2/2)

• Coding Example

CPaintDC dc(this);CFont font;font.CreatePointFont(400, _T("Arial"));dc.SelectObject(&font);dc.TextOut(10, 10, _T("Hello"));

CPaintDC dc(this);CFont font;font.CreatePointFont(400, _T("Arial"));dc.SelectObject(&font);dc.TextOut(10, 10, _T("Hello"));

Size Font name

28

Predefined Objects (stock objects)

– Call CDC::SelectStockObject(…) fucntion

name meaning

BLACK_PEN black pen with 1 pixel width

WHITE_PEN white pen with 1 pixel width

NULL_PEN transparent pen with 1 pixel widthBLACK_BRUSH black solid brush

DKGRAY_BRUSH dark gray brush

GRAY_BRUSH gray brush

LTGRAY_BRUSH light gray brush

HOLLOW_BRUSH or NULL_BRUSH

transparent brush

SYSTEM_FONT default font used by windows systemex) menu, dialog box