Image Viewer

[Chromatic-Hwi]

Image Viewer 만들기

<기능 정의>

필수

• 이미지 파일, 경로 선택 ✔
• 휠을 통한 확대, 축소✔
• 버튼으로 수치적 확대, 축소, 원본 비율 복구 ✔
• 이미지 위 커서 호버링 중 드래그 앤 드롭을 통한 이동✔

부가

• 창 크기 조절 ✔
• 정보 문자열 출력(확대 배율 등)✔
• 커서 위치(=좌표) 기준 확대, 축소
• 이미지 크기에 맞춰 창 크기 자동 조절
• 현재 창 크기에 맞게 이미지 출력 ✔
• 창 크기가 수정되면 실시간으로 윈도우를 갱신하면서 새로운 사이즈에 맞게 출력✔
• Debug assertion failed 해결 (Expression: m_hBitmap != 0, Line : 1352, 1273, 999, 1001, 1003, 1004, 1101)
• 폰트 크기 확대
• 숫자 키패드 +, - 입력을 통한 배율 변환
• 스크롤바와 이미지 끝선 일치 (배율 변화시에도)
• 이미지 배율이 축소 되었을 때는 이동될 필요가 없다 -> 표시 이미지창 사이즈 자체를 줄임
• 확대되었을 때 이미지 전체 크기의 사이즈에서 표시되는 창 사이즈를 빼면 이 값은 Max값으로 범위가 정해짐. 그 범위 안으로만 움직여지게 하면. 잔상이 남을 여유가 없어지게 됨.

---

<제작>

1. 리소스 뷰의 Dialog 창 탭에서 [리소스 추가 -> Menu 선택]

2. 해당 Menu의 파일 오픈 탭의 클래스 편집

CFileDialog dlg(TRUE);
UINT ok = dlg.DoModal(); // 파일 열기 창 표시
if (ok == IDOK)
{
  CString filepath = dlg.GetPathName(); // 전체 경로를 입력하는 함수
}

3. 마우스 커서 좌표 출력

4. 마우스 휠 가변 배율 출력

5. 버튼 클릭 배율 변화

6. 스크롤바 화면 이동

7. 마우스 드래그 & 드랍 이동

8. 더블 버퍼링, 깜박임 방지

---

전체 클래스 구조

        00 OnMenuFileOpen
        01 OnBnClickedOk -> CString Only
        02 OnMenuFileReset -> CString Only
    03 OnMouseMove
    04 OnMouseWheel
    05 OnBnClickedUpBtn
    06 OnBnClickedDownBtn
    07 OnBnClickedOriginBtn
    08 OnHScroll
    09 OnVScroll
    10 OnLButtonUp

• OnMenuFileOpen = 메뉴창 및 이미지 첫 출력

  • 이미지 리드, 치수 출력
  • origin_w, origin_h, loc_x, loc_y
  • StretchBlt
  • CString 3개 표시 -> ratioData, wndData, imgData

• OnBnClickedOk = 우측 초기화 버튼

  • CString 4개 표시 -> intData, ratioData, wndData, imgData

• OnMenuFileReset = 메뉴 초기화 탭

  • CString 4개 표시 -> intData, ratioData, wndData, imgData

• OnMouseMove = 마우스 움직임에 따른 동작

  • 미 클릭시 좌표만 실시간 변경.
  • 클릭시
  • 이미지리드, 치수 출력
  • origin_w, origin_h
  • StretchBlt

• OnMouseWheel = 마우스 휠 동작

  • CString 1개 표시 -> intData
  • 이미지 리드, 치수 출력
  • loc_x, loc_y, origin_w, origin_h
  • StretchBlt
  • CString 2개 표시 -> wndData, imgData

• OnBnClickedUpBtn = 배율 증가 버튼

  • CString 1개 -> intData
  • 이미지 리드, 치수 출력
  • origin_w, origin_h
  • StretchBlt
  • Cstring 2개 -> wndData, imgData

• OnBnClickedDownBtn = 배율 감소 버튼

  • 배율 양수 일때 -> CString -> intData
  • 이미지 리드, 치수 출력
  • origin_w, origin_h
  • StretchBlt
  • CString 2개 -> wndData, imgData

• OnBnClickedOriginBtn = 원본 비율 출력 버튼

  • CString -> intData
  • 이미지 리드, 치수 출력
  • CString -> imgData

• OnHScroll = 횡스크롤바

  • 이미지 리드, 출력
  • origin_w, origin_h
  • StretchBlt

• OnVScroll = 종스크롤바

  • 이미지 리드, 출력
  • origin_w, origin_h
  • StretchBlt

• OnLButtonDown = 마우스 클릭 버튼 다운

  • 배율 양수일때만 m_bDragFlag = ture?

• OnLButtonUp = 마우스 클릭 버튼 업

  • 이미지 리드, 출력
  • origin_w, origin_h
  • StrtechBlt
  • m_bDragFlag = false?

---

※ 참고

• (CImage JPG 출력 - 해결) https://jangjeonghun.tistory.com/entry/CImage-%ED%81%B4%EB%9E%98%EC%8A%A4%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-jpg-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0
• (CImage 설명 - 해결) https://hard-go-head.tistory.com/48
• (마우스 움직일 때 좌표 - 해결) https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=wlsdnrtjd&logNo=20141848179
• (마우스 좌표 - 해결) https://jinhobak.tistory.com/157
• (동적 레이아웃 - 해결) https://luckygg.tistory.com/233
• (줌인/줌아웃 - ) https://iamgsi.tistory.com/362
• (줌, 스크롤) https://iamgsi.tistory.com/143
• (뷰어+크기조절 유튜브) https://www.youtube.com/watch?v=Bz0_H3JXCTM
• (주제는 좀 다른데 Window 사이즈 강제 조절은 도움 될듯한 유튜브) https://www.youtube.com/watch?v=3v7Bs17NiiY
• (스크롤 기본 사용법) https://garage-fullof-dummy.tistory.com/69
• (WinAPI CScrollbar 사용법) https://3001ssw.tistory.com/113
• (스크롤바 컨트롤) https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=sws0317&logNo=30110633340
• (스크롤바) https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=hhhighhh&logNo=220769607997
• (화면 깜박임 방지 기법) https://lazineer.tistory.com/45
• (드래그) https://mrhook.co.kr/139'
• (더블 버퍼링) https://luckygg.tistory.com/103
• (드래그로 도형 그리기) https://jeak.tistory.com/3
• (Cimage 전체 화면 저장) https://blog.naver.com/PostView.nhn?blogId=tipsware&logNo=220367065310
• (파일 열기 쓰기) https://igotit.tistory.com/entry/MFC-CFileDialog-%ED%8C%8C%EC%9D%BC%EC%97%B4%EA%B8%B0-%EC%93%B0%EA%B8%B0-%EA%B3%B5%ED%86%B5%EB%8C%80%ED%99%94%EC%83%81%EC%9E%90

[Chromatic-Hwi]

CmoveItemDlg와 CAboutDlg 차이 -> ??? 콤보박스 : 버튼(또는 박스)을 누르면 아래로 컨텍스트 메뉴가 제공되어 항목을 선택할 수 있게 해주는 컨트롤을 의미. 서브클래싱 구현되어 있는 클래스를 상속하는 것. 어떤 객체의 일부 기능을 원하는 다른 기능으로 바꿔주는 것. 기존 윈도우나 컨트롤의 형태 또는 동작을 변경할 수 있도록 하는 것. 서브타이핑 : 정의되어 있는 인터페이스를 구현하는 것.

dc.StretchBlt(Rect.left, Rect.top, show_w, show_h, &memoryDC, 0, 0, bmp.bmWidth, bmp.bmHeight, SRCCOPY);//new original

BOOL StrechBlt( 1)표시 외부 프레임의 좌상단 x좌표, 2)표시 외부 프레임의 좌상단 y좌표, 3)표시 외부 프레임의 가로 폭, 4)표시 외부 프레임의 세로 폭, 소스 장치 컨텍스트 지정, a)내부 출력 이미지 좌상단 x 좌표, b)내부 출력 이미지 좌상단 y좌표, c)내부 출력 이미지의 너비, d)내부 출력 이미지의 높이, 옵션)