DKU-MUST Mobile ICT Education Center

08. Graphic and Image

Page 2

Goal

• Learn how to draw a shape on the canvas.

• Learn how to handle the image file.

• Image processing app development.

Page 3

1. Graphic ▶ Basic Canvas and Paint

Ovewview (1/2)

A class that is used to draw shapes on the screen- Canvas, Paint Class

Method basic format : Class of the android.graphics.Canvas

• Draw points, lines,

circles, squares

• Writing Text

• Printing Image

• Choose a color

• Select a Style

• Select pen thickness

• Font Selection

Page 4

Overview (2/2)

Commonly used form when the View class to override the express graphics

1. Graphic ▶ Basic Canvas and Paint

Override

the name of class

private static class Override the name of the class extends View {

//Coding to be drawn on the screen.

private static class Override the name of the class(this));

Page 5

1. Graphic ▶ Basics of Graphics Processing

Basic Example (1/2)

//Coding to be drawn on the screen.

Page 6

Basic Example (2/2)

1. Graphic ▶ Basics of Graphics Processing

Page 7

Output to the screen as shown in the figure. - Coding the Java using the following methods

Paint.setStrokeCap()

Canvas.drawOval()

Paint.setColor(Color.argb())

[Self Test 8-1]

1. Graphic ▶ Basics of Graphics Processing

Page 8

Overview

If you touch the view that you created on the screen, Touch Event occurs.

To draw a picture of a finger, you should take advantage of the touch event.

To implement the touch,coding to override the onTouchEvent() methods of the View class

1. Graphic ▶ Touch Events

Page 9

The form of general use of the TouchEvent

1. Graphic ▶ Touch Events

Page 10

[Practice 8-1] Create a simple Paintbrush(1/6)

Create a simple App

Touch or drag the screen with your finger

Draw a line or a circle

Select the line or circle in the option menu

Project Info

Project Name : Project9_1

Package Name : com.cookandroid.project9_1

build SDK : Goolge API 15 or 16

Minimum Required SDK : API 15 or 16

Activity Name : Project9_1Activity

Layout Name : main

Title : Project9_1

1. Graphic

Page 11

Design the Screen

This project is written Java code only.

Delete the main.xml

1. Graphic

[Practice 8-1] Create a simple Paintbrush(2/6)

Page 12

Java coding 1

Create a MyGraphicView class that inherits View Class

1. Graphic

[Practice 8-1] Create a simple Paintbrush(3/6)

Page 13

Java coding 2 : Option Menu

Create a 2 option menu(Draw a line, Circle)

When you click the menu,assignment global variable to curShape variable

AutoComplete the onCreateOptionsMenu( ),onOptionsItemSelected( )

1. Graphic

[Practice 8-1] Create a simple Paintbrush(4/6)

Page 14

Java coding 3 : Complete touch-related methods in the MyGraphicView

Declaration the global variable of the MyGraphicView(start x point, start y point, end x point, end y point and radius variable)

Auto completion and coding the onTouchEvent( )

1. Graphic

[Practice 8-1] Create a simple Paintbrush(5/6)

Page 15

Java coding 4 : onDraw( )

Designation the thickness of line, fill, color of line in the paint

Draw the line or circle(depending on what is selected in the menu(switch( )~case)

1. Graphic

[Practice 8-1] Create a simple Paintbrush(6/6)

Page 16

Change the [Practice 9-1]

Add draw a squares- click the two point is end point

From the Options menu, choose the colors- Color is sub menu- Only used 3 color(Red, Green, Blue)

[Self Test 8-2]

1. Graphic

Page 17

2. Image ▶ Basic of Bitmap

Overview (1/2)

Bitmap Class : Used to show the image on the canvas

onDraw( ) method : Method to show the image file in the /res/drawable folder

Page 18

Overview (2/2)

OnDraw () method to show the image files in the SD card.

How to output the image in the center of the screen

2. Image ▶ Basic of Bitmap

“File Path/file”

Page 19

Basic Example

2. Image ▶ Basic of Bitmap

Page 20

2. Image ▶ Geometric transformation of image

Overview the Geometric transformation of image

Canvas class of geometric methods

rotation : rotate() move : translate() enlarge/reduce: scale()

skewing : skew()

Page 21

Example

2. Image ▶ Geometric transformation of image

Page 22

2. Image ▶ Using image

Overview the blurring

The effect of blurring the image

BlurMaskFilter class BlurMaskFilter(radius, style);

NORMAL INNER OUTER SOLID

Page 23

Example

2. Image ▶ Using image

Page 24

Overview the Embossing

The image effects seen protruding convex.

EmbosMaskFilter ClassEmbossMaskFilter(float[] direction, float ambient, float specular, float blurRadius)

Light direction {3, 3, 3} Light direction{10, 3, 3} Light direction{3, 10, 3} Light direction{3, 3, 10}

2. Image ▶ Using image

direction array of 3 scalars [x, y, z] specifying the direction of the light source

ambient 0...1 amount of ambient light

specular coefficient for specular highlights (e.g. 8)

blurRadius amount to blur before applying lighting (e.g. 3)

Page 25

Example

2. Image ▶ Using image

Page 26

Overview the ColorMatrix

Adjust the color or brightness: ColorMatrix, ColorMatrixColorFilter Class basic form

ColorMatrix : The value of each position of the array

2. Image ▶ Using image

Page 27

Example

2. Image ▶ Using image

Page 28

[Practice 8-2] Create a mini Photoshop (1/9)

Create a mini Photoshop

Project Info.

Project Name : Project9_2

Package Name : com.cookandroid.project9_2

build SDK : Goolge API 15 or 16

Minimum Required SDK : API 15 or 16

Activity Name : Project9_2Activity

Layout Name : main

Title : Project9_2

2. Image

Page 29

Design the Screen 1

Make the 6 icon(Enlarge, reduce, rotate, lighten, darken, and gray images)

Copy the icon image in the /res/drawable-hdpi folder

Open the AndroidManifest.xml, change the id of the image file to use icon

main.xml update

Create the 2 linearlayou in the main layout

layout_weight is 1:9

Create the 6 image button in the pop of the linearlayout

Declration the widget id

• LinearLayout : iconLayout, pictureLayout

• Image Button : ibZoomin, ibZoomout, ibRotate, ibBright, ibDark, ibGray

2. Image

[Practice 8-2] Create a mini Photoshop (2/9)

Page 30

Design the Screen 2

2. Image

[Practice 8-2] Create a mini Photoshop (3/9)

Page 31

Java coding 1-1

2. Image

[Practice 8-2] Create a mini Photoshop (4/9)

Page 32

Java coding 1-2

2. Image

[Practice 8-2] Create a mini Photoshop (5/9)

Page 33

Java coding 2 : enlarge icon

축척에 사용될 전역변수를 선언

clickIcons( ) 메소드를 정의하고 확대 아이콘 클릭 리스너를 생성

clickIcons( ) 메소드를 호출

onDraw( )에 Cavas.scale( ) 메소드를 추가

2. Image

[Practice 8-2] Create a mini Photoshop (6/9)

Page 34

Java coding 3 : rotation icon

회전에 사용될 전역변수를 선언

회전 아이콘 클릭 리스너를 생성

onDraw( )에 Cavas.rotate( ) 메소드를 추가

2. Image

[Practice 8-2] Create a mini Photoshop (7/9)

Page 35

Java coding 4 : lighten icon

화면 밝기에 사용될 전역변수를 선언 / 밝게하기 아이콘 클릭 리스너를 생성

onDraw( )에 컬러 매트릭스를 적용

2. Image

[Practice 8-2] Create a mini Photoshop (8/9)

Page 36

Java coding 5 : gray image icon

채도에 사용될 전역변수를 선언 / 회색 영상 아이콘 클릭 리스너를 생성

onDraw( )에 채도 설정을 적용

2. Image

[Practice 8-2] Create a mini Photoshop (9/9)

Page 37

Change the [Practice 8-2]

Add other function

[Self Test 8-3]

2. Image

DKU-MUST Mobile ICT Education Center