8. 그래픽 – 3. 그리기 실습

이번에는 Canvas와 Paint를 사용하는 간단한 실습을 합시다.

 

[그림] 그리기 실습 실행화면
[그림] 그리기 실습 실행화면
 사용자는 메뉴에서 그릴 도형을 선택(선, 원)할 수 있고 펜의 두께(얇게, 두껍게)를 선택하거나 색상(빨강, 파랑, 녹색)을 선택할 수 있습니다.  그리고 선만 그리게 하거나 원만 그리거나 전체를 그리는 것을 선택할 수 있고 전체 도형을 지우거나 가장 최근에 그린 도형을 지울 수 있습니다.

 

먼저 여기에서 그릴 두 가지 도형을 정의합시다. 먼저 선과 원의 기반 형식인 도형 클래스를 정의합시다. 도형은 시작 좌표와 끝 좌료를 멤버 필드로 갖고 펜의 두께와 색상을 갖습니다. 파생 형식에서 각 멤버 필드의 값을 변경할 수 있게 설정자를 정의하고 접근 지정은 protected로 지정하세요.  끝 좌표는 화면 터치를 이동할 때 계속 변할 수 있어야 하므로 접근 지정을 public으로 지정하세요.

 

Diagram에서 파생한 Circle 클래스를 정의하세요. 생성자 외에 반지름을 구하는 메서드와 중심 좌표를 구하는 메서드를 제공합시다.

 

Diagram에서 파생한 Line 클래스를 정의합시다. 여기에서는 생성자를 정의하는 것으로 충분합니다.

 

이제 MainActivity 클래스를 구현합시다.  먼저 메뉴 ID로 사용할 상수를 정의합시다.

도형 종류, 두께, 선의 색상, 그리기 모드를 위한 멤버는 그리기 작업을 할 View에서 파생한 형식 개체에서 접근할 수 있게 정적 멤버로 선언하세요.

 

현재까지 그린 도형을 보관할 컬렉션과 현재 그리고 있는 도형 개체를 기억할 멤버를 추가하세요.

 

그리기 작업을 할 클래스 이름을 MyGraphicView로 정할 것입니다. MyGraphicView 개체를 기억할 멤버 필드를 선언하세요.

 

onCreate 메서드에서는 MyGraphicView 개체를 생성하고 setContentView 메서드에 해당 개체로 설정합니다. 앞에서도 다뤘듯이 Layout을 위해 정의한 activity_main.xml 파일은 필요하지 않습니다.

 

onCreateOptionMenu 메서드를 재정의하여 옵션 메뉴 항목을 추가하세요.

 

onOptionsItemSelected 메서드를 재정의하여 옵션 메뉴 항목을 선택할 때의 처리를 구현합니다. 메뉴 선택에 따라 도형이 바뀌거나, 폭, 색상, 그리기 모드를 변경하세요. 그리고 전체 지우기 혹은 가장 최근에 항목 지우기를 선택하였을 때의 처리도 해 주어야 합니다. 전체 지우기를 선택하였을 때는 도형을 보관하는 컬렉션 diagrams의 clear 메서드를 호출하세요. 가장 최근에 도형을 지우는 부분은 별도의 메서드(clearLast)를 정의하여 호출하기로 합시다. 특히 여기에서는 선택에 따라 화면에 다시 그려야 할 수도 있으므로 MyGraphicView 개체를 참조하는 변수 mv의 invalidate 메서드를 호출합니다.

 

clearLast 메서드에서는 diagrams의 맨 마지막 요소를 제거합니다.

 

이제 View를 기반으로 파생한 MyGraphicView 클래스를 정의합시다.

 

onTouchEvent 메서드를 재정의하여 화면 터치에 관한 처리를 합니다. 만약 DOWN일 때는 새로운 도형을 그리기 시작하는 것이며 MOVE일 때는 도형의 끝 좌표를 변경하는 것이고 UP은 그리고 있는 도형을 완성하는 것입니다. 각 부분을 별도의 메서드로 정의하기로 합시다.

 

먼저 도형을 그리기 시작하는 makeStartDiagram 메서드를 정의합시다. 현재 이벤트가 발생한 좌표를 얻어온 다음에 현재 그리는 도형에 따라 Circle 혹은 Line 개체를 생성합니다.

 

터치 Move일 때 끝 좌표를 변경하는 changeEndPoint 메서드를 정의합시다. 이벤트가 발생한 좌표로 도형의 끝 좌표를 설정한 후에 무효화 영역을 프로그램 방식으로 발생합니다.

 

현재 그리고 있는 도형을 확정하는 makeEndDiagram 메서드를 정의합시다. 이벤트가 발생한 좌표로 도형의 끝 좌표를 설정하고 도형 개체를 보관하는 컬렉션의 add 메서드를 호출하여 현재 도형 개체를 추가합니다. 그리고 현재 그리는 도형 개체를 null로 설정하고 무효화 영역을 프로그램 방식으로 발생합니다.

 

onDraw 메서드를 재정의하세요. 도형 컬렉션을 순차적으로 방문하여 그리는 작업과 현재 도형을 그리는 작업이 필요합니다. 특정 도형을 그리는 메서드(drawDiagram)를 별도로 정의하여 호출하세요.

 

이제 특정 도형을 그리는 drawDiagram 메서드를 정의합시다. 먼저 도형 개체의 폭과 색상을 얻어와서 Paint 개체의 속성을 설정합니다. 그리고 도형이 원인지 선인지 확인하여 해당 형식 개체로 참조한 후에 Canvas 개체의 그리기 메서드를 호출합니다.

 

다음은 mainActivity.java 파일의 소스 코드입니다.