1 / 41

09. 그래픽과 이미지

09. 그래픽과 이미지. 캔버스에 도형을 그리는 방법을 배운다 . 이미지 파일을 처리하는 방식을 학습한다 . 영상처리 앱을 작성해 본다. 1. 그래픽 ▶ 캔버스와 페인트 기본. 개요 (1/2) 화면에 도형을 그릴 때 사용되는 클래스는 Canvas 클래스와 Paint 클래스 대표적인 android.graphics.Canvas 클래스의 점을 찍는 메소드의 원형. 1. 그래픽 ▶ 캔버스와 페인트 기본. 개요 (2/2) 그래픽을 표현할 때는 View 클래스를 재정의하는 형태가 많이 사용.

aizza
Download Presentation

09. 그래픽과 이미지

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 09. 그래픽과 이미지

  2. 캔버스에 도형을 그리는 방법을 배운다. • 이미지 파일을 처리하는 방식을 학습한다. • 영상처리 앱을 작성해 본다.

  3. 1. 그래픽 ▶캔버스와 페인트 기본 • 개요 (1/2) • 화면에 도형을 그릴 때 사용되는 클래스는 Canvas 클래스와 Paint 클래스 • 대표적인 android.graphics.Canvas클래스의 점을 찍는 메소드의 원형

  4. 1. 그래픽 ▶캔버스와 페인트 기본 • 개요 (2/2) • 그래픽을 표현할 때는 View 클래스를 재정의하는 형태가 많이 사용

  5. 1. 그래픽 ▶그래픽 처리 기본 • 기본 예제 (1/2) 이 부분에 그려질 내용을 코딩

  6. 1. 그래픽 ▶그래픽 처리 기본 • 기본 예제 (2/2)

  7. 1. 그래픽 ▶그래픽 처리 기본 • [직접 풀어보기 9-1] • 그림과 같은 화면을 출력하도록 다음 메소드를 사용해 Java를 코딩해보자. • Paint.setStrokeCap() • Canvas.drawOval() • Paint.setColor(Color.argb())

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

  9. 1. 그래픽 ▶터치 이벤트 • 터치 이벤트의 일반적인 사용 형태

  10. 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

  11. 1. 그래픽 • [실습9-1] 간단 그림판 만들기 (2/6) • 화면 디자인 • 이번 프로젝트는 Java 코드로만 작성됨. • main.xml은 필요 없으므로 삭제해도 됨.

  12. 1. 그래픽 • [실습9-1] 간단 그림판 만들기 (3/6) • Java 코딩 1 • View 클래스의 상속을 받는 MyGraphicView클래스를 만든다.

  13. 1. 그래픽 • [실습9-1] 간단 그림판 만들기 (4/6) • Java 코딩 2 : 옵션 메뉴 작성 • 선 그리기, 원 그리기 2개의 옵션 메뉴를 생성 • 메뉴 클릭시curShape변수에 선택한 전역상수를 대입 • onCreateOptionsMenu( )와 onOptionsItemSelected( )를 자동완성

  14. 1. 그래픽 • [실습9-1] 간단 그림판 만들기 (5/6) • Java 코딩 3 : MyGraphicView클래스에 터치와 관련된 메소드를 완성 • MyGraphicView의 전역변수 시작x, 시작y, 끝x, 끝y 및 반지름 변수를 선언 • onTouchEvent( )를 자동완성하고 코딩

  15. 1. 그래픽 • [실습9-1] 간단 그림판 만들기 (6/6) • Java 코딩 4 : onDraw( ) 메소드를 완성 • 페인트에 선의 두께, 채우기 여부, 선의 색상을 지정 • switch( )~case문으로 메뉴에서 선택한 내용에 따라 선 또는 원을 그린다

  16. 1. 그래픽 • [직접 풀어보기 9-2] • [실습 9-1]을 다음과 같이 수정한다. • 클릭한 두 점을 끝점으로 하는 사각형이 추가로 그려지도록 한다. • 색상을 옵션 메뉴에서 선택되도록 한다. 색상은 서브 메뉴로 나오게 하고, 빨강, 초록, 파랑 3가지만 사용한다.

  17. 2. 이미지 ▶비트맵 기본 • 개요 (1/2) • Bitmap 클래스는 캔버스에 이미지를 보여주기 위해서 사용 • /res/drawable 폴더에 있는 이미지 파일을 보여주는 onDraw( ) 메소드

  18. 2. 이미지 ▶비트맵 기본 • 개요 (2/2) • SD카드의 이미지 파일을 보여주는 onDraw( ) 메소드 • 이미지를 화면 중앙에 출력하기 위한 방법

  19. 2. 이미지 ▶비트맵 기본 • 기본 예제

  20. 2. 이미지 ▶이미지의 기하학적 변환 • 이미지의 기하학적 변환 개요 • Canvas 클래스의 기하학적 메소드 회전 : rotate() 이동 : translate() 기울이기 : skew() 확대/축소 : scale()

  21. 2. 이미지 ▶이미지의 기하학적 변환 • 이미지의 기하학적 변환 예제

  22. 2. 이미지 ▶이미지 활용 • 블러링 개요 • 이미지를 뿌옇게 하는 효과 • BlurMaskFilter클래스를 제공 BlurMaskFilter(반지름, 스타일); INNER SOLID OUTER NORMAL

  23. 2. 이미지 ▶이미지 활용 • 블러링 예제

  24. 2. 이미지 ▶이미지 활용 • 엠보싱 개요 • 이미지가 볼록하게 튀어나와 보이는 효과 • EmbosMaskFilter클래스를 제공  EmbossMaskFilter(빛의 xyz 방향 1차 배열, 빛의 밝기, 반사 계수, 블러링 크기); 빛 방향 {10, 3, 3} 빛 방향 {3, 3, 10} 빛 방향 {3, 10, 3} 빛 방향 {3, 3, 3}

  25. 2. 이미지 ▶이미지 활용 • 엠보싱 예제

  26. 2. 이미지 ▶이미지 활용 • 컬러매트릭스 개요 • 색상이나 밝기를 조절하기 위한 ColorMatrix클래스, ColorMatrixColorFilter클래스의 일반적인 사용 형태 • ColorMatrix에 사용할 배열(Array)의 각 위치의 값

  27. 2. 이미지 ▶이미지 활용 • 컬러매트릭스 예제

  28. 2. 이미지 [실습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

  29. 2. 이미지 • [실습9-2] 미니 포토샵 만들기 (2/9) • 화면 디자인 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

  30. 2. 이미지 • [실습9-2] 미니 포토샵 만들기 (3/9) • 화면 디자인 2

  31. 2. 이미지 • [실습9-2] 미니 포토샵 만들기 (4/9) • Java 코딩 1-1 • 이미지 버튼에 대응할 6개 위젯 변수를 선언한다. • MyGraphicView클래스 변수를 선언한다. • MyGraphicView정의 : 그림 파일을 중앙에 비트맵으로 출력한다. • pictureLayout을 인플레이트한 후 MyGraphicView를 추가한다.

  32. 2. 이미지 • [실습9-2] 미니 포토샵 만들기 (5/9) • Java 코딩 1-2

  33. 2. 이미지 • [실습9-2] 미니 포토샵 만들기 (6/9) • Java 코딩 2 : 확대 아이콘 • 축척에 사용될 전역변수를 선언 • clickIcons( ) 메소드를 정의하고 확대 아이콘 클릭 리스너를 생성 • clickIcons( ) 메소드를 호출 • onDraw( )에 Cavas.scale( ) 메소드를 추가

  34. 2. 이미지 • [실습9-2] 미니 포토샵 만들기 (7/9) • Java 코딩 3 : 회전 아이콘 • 회전에 사용될 전역변수를 선언 • 회전 아이콘 클릭 리스너를 생성 • onDraw( )에 Cavas.rotate( ) 메소드를 추가

  35. 2. 이미지 • [실습9-2] 미니 포토샵 만들기 (8/9) • Java 코딩 4 : 밝게하기 아이콘 • 화면 밝기에 사용될 전역변수를 선언 / 밝게하기 아이콘 클릭 리스너를 생성 • onDraw( )에 컬러 매트릭스를 적용

  36. 2. 이미지 • [실습9-2] 미니 포토샵 만들기 (9/9) • Java 코딩 5 : 회색영상 아이콘 • 채도에 사용될 전역변수를 선언 / 회색 영상 아이콘 클릭 리스너를 생성 • onDraw( )에 채도 설정을 적용

  37. 1. 그래픽 • [직접 풀어보기 9-3] • [실습 9-2]를 다음과 같이 수정한다. • 회색 영상 버튼을 없앤다. • 밝게하기를 클릭하면 채도가 증가하고, 어둡게하기를 클릭하면 채도가 감소하도록 코드를 수정한다. • 블러링, 엠보싱 아이콘도 추가하고 코딩한다. 클릭하면 블러링 또는 엠보싱 기능이 On/Off 되도록 한다.

  38. 화면에 도형을 그릴 때 사용되는 클래스는 Canvas와 Paint다. 캔버스와 페인트의 개념은 도화지와 붓에 비유할 수 있다. • 대표적인 Paint 클래스의 메소드는 다음과 같다. Paint.setAntiAlias( ) → 도형의 끝부분을 부드럽게 처리해준다. Paint.setColor( ) → 색상을 지정한다. Paint.setStrokeWidth( ) → 도형 또는 글자 외곽선의 두께를 설정한다. • Canvas 클래스의 기하학적 메소드에는 rotate( ), scale( ), translate( ), skew( ) 등이 있다. • 안드로이드는 블러링 효과를 주기 위해서 BlurMaskFilter클래스를, 엠보싱 효과를 주기 위해서 EmbosMaskFilter클래스를, 색상이나 밝기를 조절하기 위해서 ColorMatrix클래스와 ColorMatrixColorFilter클래스를, 채도 조절을 위해서 ColorMatirx.setSaturation( ) 메소드를 사용한다.

More Related