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

5 Drawing Functions of CDC (2/3) Drawing shapes dc.Rectangle (x1, y1, x2, y2); dc.Ellipse (x1, y1, x2, y2); (x1, y1) (x2, y2) FunctionDescription 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) msdn2.microsoft.com/ko-kr/library/zzs00fs6(VS.80 ).aspx

More shapes of CDC (2/3) FunctionDescription ChordDraws a closed figure bounded by the intersection of an ellipse and a line EllipseDraws a circle or an ellipse PieDraws a pie-shaped wedge PolygonConnects a set of points to form a polygon RectangleDraws a rectangle with square corners RoundRectDraws a rectangle with rounded corners

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

More line functions(3/3) FunctionDescription 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

10 Drawing a Text by using CDC Text-related functions Sets alignment parametersSetTextAlign() 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”));

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 xy Output text

Text Color related functions AttributeDefault Text colorblack Background Color white Background color mode OPAQUE  TRANSPARE NT 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

15 GDI Objects (1/3) GDI Objects (class) –Tools for drawing with the GDI –Changing the attributes of the shapes toolusageClass name penWhen drawing a lineCPen brushWhen filling a regionCBrush fontWhen printing out a textCFont bitmapWhen filling a region with an imageCBitmap regionWhen defining a polygonal regionCRgn

16 GDI Objects(2/3) Class hierarchy

17 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

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

19 CPen (1/2) How to use: Pen Style // method 1 CPen pen(PS_SOLID, 2, RGB(255, 0, 0)); // using constructor // or method 2 CPen pen; pen.CreatePen (PS_SOLID, 2, RGB (255, 0, 0)); // using initializer Stylewidthcolor

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

21 CBrush (1/2) A Brush defines how to fill a region Different kinds of the brush (by using different constructor) Various BrushesExample 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 Example CPaintDC 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);

23 CFont (1/2) How to use 1.Create a CFont variable 2.Call CreateFont() function CFont font; font.CreateFont(...); // font.CreateFontIndirect(...); // font.CreatePointFont(...); // font.CreatePointFontIndirect(...); CFont font; font.CreateFont(...); // font.CreateFontIndirect(...); // font.CreatePointFont(...); // font.CreatePointFontIndirect(...);

24 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")); SizeFont name

25 Predefined Objects (stock objects) –Call CDC::SelectStockObject(…) fucntion namemeaning BLACK_PENblack pen with 1 pixel width WHITE_PENwhite pen with 1 pixel width NULL_PENtransparent pen with 1 pixel width BLACK_BRUSHblack solid brush DKGRAY_BRUSHdark gray brush GRAY_BRUSHgray brush LTGRAY_BRUSHlight gray brush HOLLOW_BRUSH or NULL_BRUSH transparent brush SYSTEM_FONTdefault font used by windows system ex) menu, dialog box

Chapter 3 The mouse and the Keyboard

Getting input from the Mouse

28 Client-Area Mouse Messages Message WM_LBUTTONDOWN WM_LBUTTONUP WM_LBUTTONDBLCL K WM_MBUTTONDOW N WM_MBUTTONUP WM_MBUTTONDBLC LK WM_RBUTTONDOWN WM_RBUTTONUP WM_RBUTTONDBLC LK WM_MOUSEMOVE Sent When The left mouse button is pressed The left mouse button is released The left mouse button is double-clicked The middle mouse button is pressed The middle mouse button is released The middle mouse button is double-clicked The right mouse button is pressed The right mouse button is released The right mouse button is double-clicked The cursor is moved over the client area

Client-Area Mouse Messages Messages for Mouse Events WM_LBUTTOND OWN WM_LBUTTONU P WM_MOUSEMO VE When moving When clicking Left button Clicking and Dragging Double clicking WM_MOUSEMO VE WM_LBUTTOND OWN WM_MOUSEMO VE WM_LBUTTONU P WM_MOUSEMO VE WM_LBUTTOND OWN WM_LBUTTONU P WM_LBUTTOND BLCLK WM_LBUTTONU P

30 Client-Area Mouse Messages Message-map macros and Message handlers Message WM_LBUTTONDOWN WM_LBUTTONUP WM_LBUTTONDBLCLK WM_MBUTTONDOWN WM_MBUTTONUP WM_MBUTTONDBLCLK WM_RBUTTONDOWN WM_RBUTTONUP WM_RBUTTONDBLCLK WM_MOUSEMOVE Message-Map Macro ON_WM_LBUTTONDOWN() ON_WM_LBUTTONUP() ON_WM_LBUTTONDBLCLK () ON_WM_MBUTTONDOWN() ON_WM_MBUTTONUP() ON_WM_MBUTTONDBLCL K() ON_WM_RBUTTONDOWN() ON_WM_RBUTTONUP() ON_WM_RBUTTONDBLCL K() ON_WM_MOUSEMOVE() Handling function OnLButtonDown OnLButtonUp OnLButtonDblClk OnMButtonDown OnMButtonUp OnMButtonDblClk OnRButtonDown OnRButtonUp OnRButtonDblClk OnMouseMove

How to add the event handler Using “Properties” window of CMainWindow

32 Mouse Message Handler Prototype of the Handler function: –nFlags Status of the mouse buttons and the Shift and Ct 기 key at the time when the message was generated afx_msg void On##### (UINT nFlags, CPoint point) ; Bit MaskMeaning MK_CONTROLCtrl key is pressed MK_SHIFTShift key is pressed MK_LBUTTONMouse left button is pressed MK_MBUTTONMouse middle button is pressed MK_RBUTTONMouse right button is pressed

33 Mouse Message Handler Prototype of the Handler function: –nFlags afx_msg void On##### (UINT nFlags, CPoint point) ; void CChildView::OnLButtonDown(UINT nFlags, CPoint point) { if(nFlags & MK_SHIFT){ // if shift key is pressed } if(nFlags & MK_RBUTTON){ // if right button is pressed at the same time } CWnd ::OnLButtonDown(nFlags, point); } void CChildView::OnLButtonDown(UINT nFlags, CPoint point) { if(nFlags & MK_SHIFT){ // if shift key is pressed } if(nFlags & MK_RBUTTON){ // if right button is pressed at the same time } CWnd ::OnLButtonDown(nFlags, point); }

34 Mouse Message Handler Prototype of the Handler function: –point Location of the cursor afx_msg void On##### (UINT nFlags, CPoint point) ; void CChildView::OnLButtonDown(UINT nFlags, CPoint point) { CClientDC dc(this); CPoint pt = point; dc.Rectangle(pt.x-100, pt.y+100, pt.x+100, pt.y-100); CWnd ::OnLButtonDown(nFlags, point); } void CChildView::OnLButtonDown(UINT nFlags, CPoint point) { CClientDC dc(this); CPoint pt = point; dc.Rectangle(pt.x-100, pt.y+100, pt.x+100, pt.y-100); CWnd ::OnLButtonDown(nFlags, point); }

Coding practice: Line drawing Draw lines by using mouse Key Idea: –Remembering the beginning and ending position 1.When the mouse left button is down Set the position as the beginning point 2.When the mouse left button is released Set the position as the ending point Drawing the line

연습 : line 긋는 프로그램 2 화면에 마우스를 이용하여 line 을 긋는다. 마우스가 움직일 때 중간 과정을 보여준다 Line 을 그리기 위해서는 – 시작점, 끝점을 기억한다. 1. 마우스 버튼 Down 시 시작점을 입력 2. 마우스 Move 시 끝점을 입력 Line 긋기 3. 마우스 버튼 Up 시 끝점을 입력 Line 긋기

Any problem? What happen when moving the mouse outside the window’s client area while dragging?

38 Capturing the mouse Mouse Capture: –Receiving mouse messages no matter where the mouse goes on the screen while dragging Related function: FunctionMeaning SetCapture()Starting Mouse Capturing ReleaseCapture()Ending mouse Capturing GetCapture()Returns CWnd pointer that owns the capture