09. 그래픽과 이미지

Page 1 Copyright© 1993-2012 Hanbit Media, Inc.All rights reserved.

IT CookBook, 안드로이드 프로그래밍

본 강의교안은 수업상황을 도입 - 전개 - 마무리로 구분하여 수업의 각 단계에서 필요한 요소 중 강의교안으로 커버할 수 있는 영역을 기준으로 작성되었습니다 .

• 도입 : 수업준비 , 전시학습 , 동기유발 , 학습목표• 전개 : 학습안내제공 , 정보제시 , 연습기회제공 , 수행유도 , 중간점검 ( 피드백 )• 마무리 : 정리 , 형성평가 , 다음 차시 안내

[ 강의교안 이용 안내 ]

• 본 강의교안의 저작권은 한빛미디어㈜에 있습니다 . • 이 자료를 무단으로 전제하거나 배포할 경우 저작권법 136 조에 의거하여 최고 5 년 이하의 징역 또는 5 천만원 이하의 벌금에 처할 수 있고 이를 병과 ( 倂科 ) 할 수도 있습니다 .


Copyright© 1993-2012 Hanbit Media, Inc.All rights reserved.

09. 그래픽과 이미지

Page 3

학습목표


• 캔버스에 도형을 그리는 방법을 배운다 .

• 이미지 파일을 처리하는 방식을 학습한다 .

• 영상처리 앱을 작성해 본다 .

Page 4

차례



1. 그래픽 ▶ 캔버스와 페인트 기본

개요 (1/2) 화면에 도형을 그릴 때 사용되는 클래스는 Canvas 클래스와 Paint

클래스

대표적인 android.graphics.Canvas 클래스의 점을 찍는 메소드의 원형


1. 그래픽 ▶ 캔버스와 페인트 기본

개요 (2/2) 그래픽을 표현할 때는 View 클래스를 재정의하는 형태가 많이 사용


1. 그래픽 ▶ 그래픽 처리 기본

기본 예제 (1/2)

이 부분에 그려질 내용을 코딩



기본 예제 (2/2)


그림과 같은 화면을 출력하도록 다음 메소드를 사용해 Java 를 코딩해보자 . Paint.setStrokeCap()

Canvas.drawOval()

Paint.setColor(Color.argb())

[ 직접 풀어보기 9-1]



1. 그래픽 ▶ 터치 이벤트

개요 화면에 생성한 뷰를 터치하면 Touch 이벤트가 발생 손가락으로 그림을 그릴려면 터치 이벤트를 활용해야 한다 . 터치를 구현하려면 View 클래스의 onTouchEvent( ) 메소드를

오버라이드해서 코딩


1. 그래픽 ▶ 터치 이벤트

터치 이벤트의 일반적인 사용 형태


[ 실습 9-1] 간단 그림판 만들기 (1/6)

화면을 손가락으로 터치 , 드래그해서 선 또는 원을 그리는 간단한 앱을 작성하자 . 선을 그릴지 , 원을 그릴지는 옵션메뉴로 선택하도록 작성한다 .

프로젝트 정보 프로젝트 이름 : Project9_1 패키지 이름 : com.cookandroid.project9_1 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project9_1Activity 레이아웃 이름 : main 타이틀 : Project9_1

1. 그래픽


화면 디자인 이번 프로젝트는 Java 코드로만 작성됨 . main.xml 은 필요 없으므로 삭제해도 됨 .

[ 실습 9-1] 간단 그림판 만들기 (2/6)

1. 그래픽


Java 코딩 1 View 클래스의 상속을 받는 MyGraphicView 클래스를 만든다 .

[ 실습 9-1] 간단 그림판 만들기 (3/6)

1. 그래픽


Java 코딩 2 : 옵션 메뉴 작성 선 그리기 , 원 그리기 2 개의 옵션 메뉴를 생성 메뉴 클릭시 curShape 변수에 선택한 전역상수를 대입 onCreateOptionsMenu( ) 와

onOptionsItemSelected( ) 를 자동완성

[ 실습 9-1] 간단 그림판 만들기 (4/6)

1. 그래픽


Java 코딩 3 : MyGraphicView 클래스에 터치와 관련된 메소드를 완성

MyGraphicView 의 전역변수 시작 x, 시작 y, 끝 x, 끝 y 및 반지름 변수를 선언 onTouchEvent( ) 를 자동완성하고 코딩

[ 실습 9-1] 간단 그림판 만들기 (5/6)

1. 그래픽


Java 코딩 4 : onDraw( ) 메소드를 완성 페인트에 선의 두께 , 채우기 여부 , 선의 색상을 지정 switch( )~case 문으로 메뉴에서 선택한 내용에 따라 선 또는 원을 그린다

[ 실습 9-1] 간단 그림판 만들기 (6/6)

1. 그래픽


[ 실습 9-1] 을 다음과 같이 수정한다 . 클릭한 두 점을 끝점으로 하는 사각형이

추가로 그려지도록 한다 . 색상을 옵션 메뉴에서 선택되도록 한다 .

색상은 서브 메뉴로 나오게 하고 , 빨강 , 초록 , 파랑 3 가지만 사용한다 .


1. 그래픽


2. 이미지 ▶ 비트맵 기본

개요 (1/2) Bitmap 클래스는 캔버스에 이미지를 보여주기 위해서 사용 /res/drawable 폴더에 있는 이미지 파일을 보여주는 onDraw( )

메소드



개요 (2/2) SD 카드의 이미지 파일을 보여주는 onDraw( ) 메소드

이미지를 화면 중앙에 출력하기 위한 방법



기본 예제


2. 이미지 ▶ 이미지의 기하학적 변환

이미지의 기하학적 변환 개요 Canvas 클래스의 기하학적 메소드

회전 : rotate() 이동 : translate() 확대 / 축소 : scale() 기울이기 : skew()


2. 이미지 ▶ 이미지의 기하학적 변환

이미지의 기하학적 변환 예제


2. 이미지 ▶ 이미지 활용

블러링 개요 이미지를 뿌옇게 하는 효과 BlurMaskFilter 클래스를 제공 BlurMaskFilter( 반지름 , 스타

일 );

NORMAL INNER OUTER SOLID



블러링 예제



엠보싱 개요 이미지가 볼록하게 튀어나와 보이는 효과 EmbosMaskFilter 클래스를 제공 EmbossMaskFilter( 빛의

xyz 방향 1 차 배열 , 빛의 밝기 , 반사 계수 , 블러링 크기 );

빛 방향 {3, 3, 3} 빛 방향 {10, 3, 3} 빛 방향 {3, 10, 3} 빛 방향 {3, 3, 10}



엠보싱 예제



컬러매트릭스 개요 색상이나 밝기를 조절하기 위한 ColorMatrix 클래스 ,

ColorMatrixColorFilter 클래스의 일반적인 사용 형태

ColorMatrix 에 사용할 배열 (Array) 의 각 위치의 값



컬러매트릭스 예제


[ 실습 9-2] 미니 포토샵 만들기 (1/9)

포토샵과 비슷한 기능을 하는 간단한 앱을 작성한다 . 아이콘을 사용해 화면을 깔끔하게 처리한다 ..

프로젝트 정보 프로젝트 이름 : Project9_2 패키지 이름 : com.cookandroid.project9_2 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project9_2Activity 레이아웃 이름 : main 타이틀 : Project9_2

2. 이미지


화면 디자인 1 확대 , 축소 , 회전 , 밝게하기 , 어둡게하기 , 회색 영상 등 6 개 아이콘으로 사용할

그림 파일과 앱의 제목 왼쪽 아이콘으로 사용할 그림 , 화면에 출력할 그림 파일을 /res/drawable-hdpi 에 복사한다 .

AndroidManifest.xml 파일을 열고 아이콘으로 사용할 그림 파일의 id 로 변경 .

main.xml 수정 바깥 리니어레이아웃 안에 2 개의 리니어레이아웃 생성한다 . 두 리니어레이아웃의 layout_weight 는 1:9 정도로 설정한다 . 위쪽 리니어레이아웃에 이미지 버튼 6 개를 생성한다 . 위젯의 id 를 다음과 같이 선언한다 .

• 리니어레이아웃 : iconLayout, pictureLayout

• 이미지버튼 : ibZoomin, ibZoomout, ibRotate, ibBright, ibDark, ibGray

[ 실습 9-2] 미니 포토샵 만들기 (2/9)

2. 이미지


화면 디자인 2

[ 실습 9-2] 미니 포토샵 만들기 (3/9)

2. 이미지


Java 코딩 1-1 이미지 버튼에 대응할 6 개 위젯 변수를 선언한다 . MyGraphicView 클래스 변수를 선언한다 . MyGraphicView 정의 : 그림 파일을 중앙에 비트맵으로 출력한다 . pictureLayout 을 인플레이트한 후 MyGraphicView 를 추가한다 .

[ 실습 9-2] 미니 포토샵 만들기 (4/9)

2. 이미지


Java 코딩 1-2

[ 실습 9-2] 미니 포토샵 만들기 (5/9)

2. 이미지


Java 코딩 2 : 확대 아이콘 축척에 사용될 전역변수를 선언 clickIcons( ) 메소드를 정의하고 확대 아이콘 클릭 리스너를 생성 clickIcons( ) 메소드를 호출 onDraw( ) 에 Cavas.scale( ) 메소드를 추가

[ 실습 9-2] 미니 포토샵 만들기 (6/9)

2. 이미지


Java 코딩 3 : 회전 아이콘 회전에 사용될 전역변수를 선언 회전 아이콘 클릭 리스너를 생성 onDraw( ) 에 Cavas.rotate( ) 메소드를 추가

[ 실습 9-2] 미니 포토샵 만들기 (7/9)

2. 이미지


[ 실습 9-2] 미니 포토샵 만들기 (8/9)

Java 코딩 4 : 밝게하기 아이콘 화면 밝기에 사용될 전역변수를 선언 / 밝게하기 아이콘 클릭 리스너를 생성 onDraw( ) 에 컬러 매트릭스를 적용

2. 이미지


Java 코딩 5 : 회색영상 아이콘 채도에 사용될 전역변수를 선언 / 회색 영상 아이콘 클릭 리스너를 생성 onDraw( ) 에 채도 설정을 적용

[ 실습 9-2] 미니 포토샵 만들기 (9/9)

2. 이미지


[ 실습 9-2] 를 다음과 같이 수정한다 . 회색 영상 버튼을 없앤다 . 밝게하기를 클릭하면 채도가 증가하고 ,

어둡게하기를 클릭하면 채도가 감소하도록 코드를 수정한다 .

블러링 , 엠보싱 아이콘도 추가하고 코딩한다 . 클릭하면 블러링 또는 엠보싱 기능이 On/Off 되도록 한다 .


1. 그래픽

Page 40

핵심정리


1. 화면에 도형을 그릴 때 사용되는 클래스는 Canvas 와 Paint 다 . 캔버스와 페인트의 개념은 도화지와 붓에 비유할 수 있다 .

2. 대표적인 Paint 클래스의 메소드는 다음과 같다 .

Paint.setAntiAlias( ) → 도형의 끝부분을 부드럽게 처리해준다 .

Paint.setColor( ) → 색상을 지정한다 .

Paint.setStrokeWidth( ) → 도형 또는 글자 외곽선의 두께를 설정한다 .

3. Canvas 클래스의 기하학적 메소드에는 rotate( ), scale( ), translate( ), skew( ) 등이 있다 .

4. 안드로이드는 블러링 효과를 주기 위해서 BlurMaskFilter 클래스를 , 엠보싱 효과를 주기 위해서 EmbosMaskFilter 클래스를 , 색상이나 밝기를 조절하기 위해서 ColorMatrix 클래스와 ColorMatrixColorFilter 클래스를 , 채도 조절을 위해서 ColorMatirx.setSaturation( ) 메소드를 사용한다 .



Documents

09. 그래픽과 이미지