제6장 그래픽 객체의 사용

전체 글

(1)제6장 그래픽 객체의 사용 6.1 GDI와 DC의 개념 6.2 GDI 객체 실습 6-1 직선과 도형 및 비트맵 그리기 6.3 GDI+ 의 개념 실습 6-2 사각형 뷰 포트에 원 그리기.

(2) GDI의 개념 . Graphic Device Interface • 윈도우가 하드웨어를 제어할 수 있도록 응용 프로그램 • •. 에 제공하는 모든 기능 응용 프로그램과 디바이스 드라이버의 중간 역할 응용 프로그램에 대한 장치 독립적인 그래픽 동작 수 행.

(3) Device Context(DC)의 개념 . 일종의 핸들 • 애플리케이션과 출력 장치를 연결하는 역할 • 애플리케이션이 출력에 대한 허가를 얻고, 또한 그려지 는 영역을 결정하는 역할. . . GDI에 의해 내부적으로 유지되는 데이터 구조 • 여러 가지 그래픽 속성에 대한 값을 가짐 • Ex) 텍스트 속성/색상, 매핑 모드, 글꼴 DC를 사용하는 이유 • 독립적인 하드웨어 출력을 할 수 있어 출력장치에 상관 없이 동일한 방법으로 출력을 설정. . DC를 얻고 나면, 반드시 작업 완료 시 해제한다.

(4) DC를 얻는 방법 . 4가지 DC를 얻는 방법. ① OnDraw()함수, OnPaint()함수를 이용 ② GetDC() 함수를 이용 ③ CClientDC 클래스를 이용 ④ CWindowDC 클래스를 이용.

(5) OnDraw()함수, OnPaint()함수를 이용 •. •. • •. OnDraw() 함수의 인자 - CDC 오브젝트 Void CPractice6_1View:: OnDraw(CDC * pDC) { … }. OnPaint() 함수 내의 CPaintDC 오브젝트 Void CPractice6_1View::OnPaint() { CPaintDC dc(this) … }. 윈도우나 클라이언트 영역이 다시 그려져야 할 경 우 수행 DC의 해제는 MFC 내부 코드에 존재한다..

(6) GetDC() 함수를 이용 • 이 함수의 포인터 반환 값을 받아서 사용 • ReleaseDC()함수를 호출하여 반드시 해제 • 사용 예 CDC *pDC = GetDC(); … ReleaseDC(pDC);. • 이 방법으로 DC를 얻는 것은 일시적인 것으 로 윈도우의 크기가 변하면 출력한 내용이 사라진다..

(7) CClientDC 클래스를 이용 • CClientDC 는 CDC 클래스의 파생 클래스 • Device Context의 생성/해제 자동적 수행 • •. 생성자 함수에서 GetDC()함수를 호출 소멸자 함수에서 ReleaseDC()함수를 호출. • 윈도우에 대한 핸들 값이 필요 • 일시적으로 윈도우의 클라이언트 영역에서 •. 그래픽 개체를 사용할 경우에 이용 사용 예. CClientDC dc(this) ….

(8) CWindowDC 클래스를 이용 • 윈도우(프레임) 영역에 그래픽 요소를 출력 • • •. 하고자 할 때 사용한다. GetWindowDC()함수를 이용하여 CWindowDC 클래스의 인스턴스를 포인터 형태로 넘겨 받아 이용 작업 수행 후, ReleaseDC()함수로 해제 사용 예. CWindowDC *pDC = GetWindowDC(); … ReleaseDC();.

(9) GDI 객체 . GDI 기본 구성 요소 • 선과 곡선(Lines and Curves) • 직선, 사각형, 타원, 호, 베지어 곡선 • 채워진 영역(Filled Areas) • 브러시 개체를 이용 – 색상, 패턴, 비트맵 이미지 • 비트맵(Bitmaps) • 디스플레이 장치의 픽셀과 일치하는 직사각형 배열 • 래스터 그래픽의 기본적인 도구 • 텍스트(Text).

(10) 화면에 그래픽 출력하기위한 요소 GDI 객체. GDI 객체 클래스. 기본값. 사용 용도. 펜. CPen. 검정색, 실선, 1픽셀 크기. 점, 선, 테두리. 브러시. CBrush. 무늬 없는 흰색. 내부(영역) 채우기. 폰트. CFont. 시스템 폰트. 문자의 폰트. 비트맵. CBitmap. 없음. 비트맵 출력. 영역. CRgn. 없음. 영역 만들기, 변경하 기. 팔레트. CPalette. 없음. 팔레트 조작.

(11) 객체를 사용하는 방법 ① GDI 객체를 생성. • 객체 클래스의 Create계열 함수 이용 ② 객체를 DC에 등록. • SelectObject()함수를 이용 • 기존 설정된 객체는 포인터로 저장 ③ DC를 사용하여 그래픽 출력 ④ 이전 객체로 환원 ⑤ 객체를 삭제. • DeleteObject()함수 이용.

(12) 펜(Pen) . 펜(Pen) • 선이나 영역의 경계선을 그릴 때 사용 • 선의 두께, 선이 색상, 선의 스타일을 설정. . 펜을 사용하는 방법 ① CPen pen *oldpen pen.CreatePen(PS_SOLID, 1,RGB(0,0,0)); ② oldpen = pDC->SelectObject(&pen); ③ pDC->Ellipse(0,0,10,10); ④ pDC->SelectObject(oldpen); ⑤ pen.DeleteObject();.

(13) CreatePen() 함수 • CreatePen() 함수는 Pen을 생성하는 함수로 원형은 다음과 같다. BOOL CreatePen(int nPenStyle, int nWidth, COLORREF crColor); • nPenStyle : 펜의 스타일 • nWidth : 펜의 굵기 • crColor : 펜의 색상.

(14) 펜의 스타일 펜의 스타일. 내용. PS_SOLID. 실선. PS_DASH. 파선. PS_DOT. 점선. PS_DASHDOT. 일점 쇄선. PS_DASHDOTDOT. 이점 쇄선. PS_NULL. 선을 그리지 않음. 모양.

(15) 브러시(Brush) . 브러시(Brush) • 영역의 내부를 채울 때 사용 • 채울 색, 패턴 등이 사용. . 브러시를 사용하는 방법 ① CBrush brush *oldbrush brush.CreateSolidBrush(RGB(0,0,0)); bush.CreateHatchBrush(HS_CROSS,RGB(0,0,0)); ② oldbrush = pDC->SelectObject(&brush); ③ pDC->Ellipse(0,0,10,10); ④ pDC->SelectObject(oldbrush); ⑤ brush.DeleteObject();.

(16) 브러시(Brush) . . CreateSolidBrush() 함수 • 단일 색으로 칠하는 브러시를 생성하는 함수 CreateHatchBrush() 함수 • 일정한 패턴을 가진 해치 브러시를 생성하는 함수. • 해치 브러쉬의 스타일 해치 브러시의 스타일. 내용. HS_BDIAGONAL. 오른쪽에서 왼쪽으로 45도 내려가는 빗금. HS_CROSS. 십자가 형태의 빗금. HS_DIAGCROSS. X자 형태의 빗금. HS_FDIAGONAL. 왼쪽에서 오른쪽으로 45도 내려가는 빗금. HS_HORIZONTAL. 수평으로 빗금. HS_VERTICAL. 수직으로 빗금. 모양.

(17) 그래픽 함수 . 선 그리기. . 사각형 그리기.  . . • MoveTo(int x, int y) 함수 • LineTo(int x, int y)함수. • Rectangle(int x1, int y1, int x2, int y2) 원 그리기 • Ellipse(int x1, int y1, int x2, int y2) 다각형 그리기 • Polyline(LPPOINT lpPoints, int nCount) • Polygon(LPPOINT lpPoints, int nCount) 베지어 곡선 그리기 • PolyBezier(const POINT* lpPoints, int nCount).

(18) 래스터 오퍼레이션 . 래스터 오퍼레이션. • 새로 그려야 할 그림과 기존의 화면에 그려져 있는 그림을 합성하는 것 • 펜과 브러시에 적용되며 SetROP2()함수로 설정한다.. • R2_COPYPEN : 배경그림 무시하고 새로 그 려지는 그림을 출력 • R2_XORPEN : 한번 그리면 그림이 그려지고 다시 한번 그리면 원래의 바탕색이 복원.

(19) GDI 객체 . 비트맵. • CBitmap클래스를 이용하는 객체로 비트맵을 생성하거나 읽어서 비트맵을 출력할 때 사용 • 비트맵의 래스터 오퍼레이션. • SRCCOPY : 배경그림 무시하고 비트맵 출력 • SRCAND : 배경그림과 AND 연산 • SRCPAINT : 배경그림과 OR 연산.

(20) 비트맵을 사용하는 방법 ① 화면 DC와 메모리 DC를 생성 • CClinetDC dc(this); • CDC memdc; ② 화면 DC와 호환성을 갖는 DC를 만든다. • memdc.CreateCompatibleDC(&dc); ③ 비트맵을 읽어온다 • CBitmap bitmap, *oldbitmap; • bitmap.LoadBitmap(IDB_BITMAP1); ④ 메모리 DC에 비트맵을 설정한다. • oldbitmap = memdc.SelectObject(&bitmap); ⑤ 비트맵 블록을 전송한다. • dc.BitBlt(0, 0, 450, 85, &memdc, 0, 0, SRCCOPY); ⑥ DC를 복원한다. • memdc.SelectObject(oldbitmap);.

(21) 폰트(font) • CFont 클래스를 이용하는 객체로 문자를 출 력할 때 사용하며 글자의 모양, 크기가 설정 • 폰트의 종류. • 논리적인 폰트 : 이상적인 폰트에 대한 표현으. 로 실제로 존재하는 것이 아니라 유사한 폰트 를 얻기 위해 사용 • 물리적인 폰트 : 실제로 시스템에 설치되어 있 는 폰트를 의미하며 실제로 화면에 나타난다..

(22) 폰트를 사용하는 방법 • 폰트를 출력하기 위해서는 원하는 폰트에 대 해 논리적인 폰트를 LOGFONT타입으로 기 술하여 생성하고 DC에 폰트를 선택하여 넣는 다. • 윈도우 GDI 의 폰트 맵퍼가 시스템에 설치되 어 있는 폰트들 중에 가장 가까운 물리적인 폰 트를 찾아 출력한다..

(23) 실습 6-1 . 직선과 도형 및 비트맵 그리기. • 직선, 원, 다각형, 비트맵을 그리는 프로그램을. 작성 • 러버밴드(Rubber Band)를 이용하여 마우스 움 직임을 따라다니면서 그림을 그릴 것이다. • 러버밴드를 이용한 직선, 원, 다각형을 그려볼 것이다. • DC를 얻는 방법, GDI 객체의 사용법과 그래 픽 함수를 사용하는 내용.

(24) 러버밴드 기법 • 그리기 작업을 하다 보면 마우스의 움직임에 따라 가 •. •. 상의 선이 늘었다 줄었다 하는 것을 볼 수 있는데 이 러한 것을 러버밴드(Rubber Band)라고 부른다. 러버밴드로 그림을 그리려면 R2_NOTXORPEN 래 스터 오퍼레이션을 사용하여 그림을 그린다. 구현 방법 • 이전에 그려진 그림을 지움 • 새로운 그림을 그림 • 마우스가 움직였을 때 이전에 그려진 그림이 지워질 수 있도 록 현재 점 저장.

(25) 실습 6-1프로그램 작성 순서 1) 실습 5-3 프로젝트를 연다 2) 필요한 멤버 변수를 추가한다. • 직선, 원, 다각형을 그리기 위한 변수. 3) 왼쪽 마우스를 눌렸을 때의 동작을 지정한다. • 직선, 원 그리기 : 시작점과 이전 점에 현재 점을 저장하고 •. 왼쪽 버튼이 눌린 것을 체크하고, 처음 그리는 것으로 체크 한다 다각형 그리기 : 처음 그리는 것이면 시작점과 이전 점에 현재 점을 저장하고, 처음 그리지 않는 것으로 체크한 다음 배열에 현재 점을 저장하고 카운트를 증가한다. 다각형을 처음 그리는 것이 아니면 시작점과 이전 점에 현재 점을 저 장하고, 배열에 현재 점을 저장하고 카운트를 증가한다..

(26) 실습 6-1프로그램 작성 순서 4) 마우스가 움직일 때의 동작을 지정한다. • 먼저 펜과 브러시를 생성하고 그리기 모드에 따라 러버밴드로 직선, 원, 다각형을 그린다.. 5) 왼쪽 마우스를 놓았을 때의 동작을 지정한다. • 그리기 모드가 직선, 원 그리기이면 다시 직 •. 선, 원을 그리기 위해 체크변수를 초기화한다. Invalidate() 함수를 이용하여 OnDraw() 함 수를 호출한다..

(27) 실습 6-1프로그램 작성 순서 6) 오른쪽 마우스를 눌렸을 때 동작을 지정한다. • 그리기 모드가 다각형 그리기이면 배열에 현 • •. 재 점을 저장하고 카운트를 증가한다. 다시 다각형을 그리기 위해 체크변수를 초기 화하고, Invalidate() 함수를 이용하여 OnDraw() 함수를 호출한다. 그런 다음 마우스 캡쳐를 해제하고 이동 범 위 제한을 해제한다.. 7) OnDraw()함수에 마지막으로 그리는 루틴을 추가한다..

(28) 실습 6-1프로그램 작성 순서 8) 문맥 메뉴가 제대로 작동하도록 수정한다. • 다각형 그리기 모드일 때 다각형을 완성하 •. 기 위해 오른쪽 마우스를 사용한다. 다각형 그리기 모드에서 다각형을 완성하 기 위해 오른쪽 마우스를 클릭할 경우에는 문맥메뉴가 팝업 되지 않도록 수정한다.. 9) 선과 면의 색상을 변경한다.. • 선의 색상을 변경하는 것은 펜의 색상을 변. •. 경한다 면의 색상을 변경하는 것은 브러시의 색상 을 변경하면 된다.. 10)면의 무늬를 변경한다..

(29) 실습 6-1프로그램 작성 순서 11)리소스에 비트맵을 등록한다.  리소스로부터 비트맵을 읽어와 화면에 출 력하려면 리소스에 비트맵이 등록되어 있 어야 한다. 12)OnDraw()함수에 비트맵을 출력할 코드 를 입력한다.  먼저 호환성 있는 메모리 DC를 생성하고 리소스에서 비트맵을 읽어 메모리 DC에 비트맵을 설정한 다음 비트맵 출력 모드 에 따라 비트맵을 출력한다. 13)프로그램을 실행시켜본다..

(30) 직선, 원 그릴 때 마우스 메시지에 대한 기능. ① 왼쪽 마우스 버튼 누름 : 시작점과 이전 점에 현재 점을 저장한다 ② 왼쪽 마우스 버튼 누른 채로 마우스 움직일 때 : 러버밴드로 직선, 원, 사각형을 그린다. (R2_NOTXORPEN 이용) ③ 왼쪽 마우스 버튼을 놓음 : OnDraw() 함수를 호출하여 마지막 직선, 원, 사각형을 그린다. (R2_COPYPEN 이용).

(31) 다각형 그릴 때 마우스 메시지에 대한 기능 ① 왼쪽 마우스 버튼 누름(처음) : 시작점과 이전 점에 현재 점을 저장하고 배열에 현재 점을 저장한다. ② 마우스 움직일 때 : 러버밴드로 직선을 그린다. (R2_NOTXORPEN 이용) ③ 왼쪽 마우스 버튼 누름(반복) : 시작점과 이전 점에 현재 점을 저장하고 배열에 현재 점을 저장한다. (반 복) ④ 마우스 움직일 때(반복) : 러버밴드로 직선을 그린다. (R2_NOTXORPEN 이용) ⑤ 오른쪽 마우스 버튼을 누름 : 배열에 현재 점을 저장 하고 OnDraw() 함수를 호출하여 배열에 저장된 순 서대로 마지막 다각형을 그린다. (R2_COPYPEN 이 용).

(32) 실습 6-1 • 실행 화면.

(33) 실습 6-1 • 실행 화면.

(34) GDI+의 개념 . GDI+. • GDI모듈의 업그레이드 버전 • 복잡하고 섬세한 그래픽을 출력할 수 있는 모듈 . GID와 GDI+의 차이점.

(35) GDI와 GDI+의 차이점 • GDI+는 Graphics 객체를 먼저 생성해야 한다. • 그리기 함수들은 Graphics 클래스의 멤버함수 • 출력함수들은 그리기에 필요한 값을 인수로 전달받는다. • 똑같은 도형을 그리는 함수도 인수의 타입에 따라 여러 가지 로 나뉜다. • GDI+ 오브젝트들은 C++객체이므로 메모리 해제하는 코드 를 따로 작성할 필요가 없다. • 소멸자 함수에서 메모리를 해제해준다 • GDI+에서 사용하는 문자열은 유니코드 시스템을 사용해야 한다.. • GDI+에서는 다양한 그래픽 파일 포맷을 지원한다..

(36) GDI+ 클래스 계층.

(37) GDI+ 클래스 . Graphics 클래스. • GDI+의 가장 중요하고 기본이 되는 클래스 • 출력을 하려면 이 클래스의 객체를 먼저 생성해 야 한다. • 다양한 생성자 함수. • Graphics(HDC hdc) • Graphics(HDC hdc, HANDLE hdevice) • Graphics(HWND hwnd, BOOL im) • Graphics(Image* image).

(38) GDI+ 클래스 . Pen 클래스. • 선을 그릴 때 사용하는 그래픽 오브젝트 • 생성자 함수 • Pen(const Color &color, REAL width) • Pen(const Brush *brush, REAL width). • SetDashStyle( )함수 • 선의 모양을 변경하는 함수 • 함수 원형 • SetDashStyle(DashStyle dashStyle).

(39) GDI+ 클래스 . SetDashStyle 펜의 스타일 펜의 스타일. 내용. DashStyleSolid. 실선. DashStyleDash. 파선. DashStyleDot. 점선. DashStyleDashDot. 일점 쇄선. DashStyleDashDotDot. 이점 쇄선. DashStyleCustom. 선을 그리지 않음. 모양.

(40) GDI+ 클래스 . Brush 클래스. • 채색하는 무늬를 만드는 방법에 따라 여러 종류 의 클래스 계층을 구성.

(41) GDI+ 클래스 . Brush 클래스(계속). • LinearGradientBrush 클래스 • 지정한 두 색상이 점점 변하는 모양으로 채색하 는 브러시 • 6가지 생성자 함수가 있음. • LinearGradientBrush(const Point &point1, const Point &point2, const Color &color1, const Color &color2).

(42) GDI+ 클래스 . Brush 클래스 (계속) • SolidBrush 클래스 • 단색 브러시로 가장 기본적인 브러시 • 생성자 함수 • SolidBrush(const Color &color). • HatchBrush 클래스. • 무늬가 있는 브러시 • 52가지의 무늬를 제공 (GDI는 6가지 무늬 제공) • 생성자 함수 • HatchBrush(HatchStyle hatchStyle, const Color &foreColor, const Color &backColor).

(43) GDI+ 그래픽 함수 . 선 그리기. • DrawLine(const Pen *pen, const Point &pt1, const Point &pt2) • DrawLine(const Pen *pen, INT x1, INT y1, INT x2, INT y2) • DrawLine(const Pen *pen, const PointF &pt1, const PointF &pt2) • DrawLine(const Pen *pen, REAL x1, REAL y1, REAL x2, REAL y2).

(44) GDI+ 그래픽 함수 . 사각형 그리기. • GDI는 LTRB 방식을 사용하고 GDI+는 XYWH(좌상단점 좌표와 사각형의 폭과 높이) 방식을 사용한다. • DrawRectangle(const Pen *pen, const Rect &rect) • DrawRectangle(const Pen *pen, INT x, INT y, INT width, INT height).

(45) GDI+ 그래픽 함수 . 원 그리기. • 주어진 사각형에 내접하는 타원을 그린다. • Status DrawEllipse(const Pen *pen, const Rect &rect) • StatusDrawEllipse (const Pen *pen, INT x, INT y, INT width, INT height) . 다각형 그리기. • Status DrawPolygon(const Pen *pen, const Point *points, INT count).

(46) GDI+ 그래픽 함수 . 곡선 그리기. • 카디날 곡선과 베지어 곡선을 지원 • 카디날 곡선 • Status DrawCurve(const Pen *pen, cont Point *points, INT count, REAL tension). • 베지어 곡선 • Status DrawBezier(const Pen *pen, Point& pt1, Point& pt2, Point& pt3, Point& pt4).

(47) GDI+ 클래스 . Font 클래스. • Font 클래스로 객체를 생성한 후 DrawString() 함수로 이 객체의 포인터를 전달하면 문자열 출 력에 폰트가 사용된다. • 생성자 함수. • Font(const WCHAR *familyName, REAL emSize, INT sytle, Unit unit, const FontCollection *fontCollection).

(48) 폰트 관련 그래픽 함수 . 문자열 출력함수 • Status DrawString(const WCHAR *string, INT length, cont Font *font, const PointF &origin, const Brush *brush) • Status DrawString(const WCHAR *string, INT length, const Font *font, const PointF &origin, const StringFormat *stringFormat, const Brush *brush); • Status DrawString(const WCHAR *string, INT length, const Font *font, const RectF &layoutRect, const StringFormat *stringFormat, const Brush *brush);.

(49) 실습 6-2 . 사각형 영역을 만든 후 그 안에 원 그리기. • 이 프로젝트는 우선 사각형을 그리면 그 사각형 이 viewport가 된다. 그리고 원을 그리게 되면 viewport 밖으로 나간 부분의 원은 그려지지 않 게 한다. • 또한 원의 해상도를 증가하고 감소할 수 있는 기능이 있게 구현한다. 이런 기능을 갖기 위해 서는 원을 그릴 때 Ellipse()함수를 사용하여서 는 안 된다..

(50) 실습 6-2 • 실행 화면.

(51) 실습 6-2프로그램 작성 순서 1) “단일문서’ 기반의 프로젝트를 생성한다. 2) GDI+ 라이브러리를 초기화한다. 3) 메뉴 리소스를 편집한다. 4) 툴바 리소스를 편집한다. 5) 상태 표시줄에 팬을 만들고 문자열을 출력 6) 메뉴를 동작하게 한다. 7) 문맥메뉴를 만든다..

(52) 실습 6-2 프로그램 작성 순서 8) 도형을 그리기 위한 변수를 추가한다 • 사각형, 원을 그리기 위한 변수. 9) WM_LBUTTONDOWN에 대한 메시지 핸들 러 함수를 만든다. 10) 마우스 이동에 대한 메시지 핸들러 함수를 만든다. 11) WM_LBUTTONUP에 대한 메시지 핸들러 함수를 만든다. 12) 원을 구하는 함수를 만든다..

(53) 실습 6-2 프로그램 작성 순서 13) OnDraw()함수에 마지막으로 그리는 루틴을 추가한다. 14) 원의 해상도를 조절할 수 있게 한다. 15) 프로그램을 실행시킨다..

(54) 연습문제 6-1.펜과 지우개를 구현하여 그림을 그리고 지우는 프로그램을 구현한다.. • 왼쪽 마우스는 펜의 기능을 가지며 왼쪽 마우스. 를 누르고 이동시키면 이동시키는 대로 내용이 출력된다. • 대화상자를 통해 크기와 색상을 변경할 수 있다. 오른쪽 마우스는 지우개 기능을 가지며 대화상 자를 통해 펜의 크기를 조절할 수 있다. 오른쪽 마우스를 누르고 이동시키면 이동시키는 대로 출력된 내용이 지워진다. • 크기와 색상을 조절하는 대화상자는 툴바를 통 해 출력된다..

(55) 연습문제 6-1 . . 툴바 구성. [새 파일] [펜의 크기] [펜의 색상] [지우개]. 펜과 지우게 설정 대화상자.

(56) 연습문제 6-1 . 실행 화면. [처음 실행 화면]. [펜 크기 설정 대화상자]. [그리기 화면]. [지우개 크기 설정 대화상자].

(57) 연습문제 6-2.도킹 팬 윈도우를 이용하여 문 자열을 출력하는 프로그램을 작성하라.. • 도킹 팬 윈도우를 이용하여 위치와 문자열을 입 력받아 그 문자열을 출력한다. • 색상과 폰트 공용 대화상자를 이용하여 색상과 글꼴 및 크기를 변경할 수 있어야 하며 출력된 문자열을 키보드의 방향키로 이동시킬 수 있어 야 한다..

(58) 연습문제 6-2 . 실행화면. 문자열 출력. 문자열 폰트 및 색상 변경.

(59)