08. graphic and image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 graphic and...
TRANSCRIPT
![Page 1: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/1.jpg)
DKU-MUST Mobile ICT Education Center
08. Graphic and Image
![Page 2: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/2.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/3.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/4.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/5.jpg)
Page 5
1. Graphic ▶ Basics of Graphics Processing
Basic Example (1/2)
//Coding to be drawn on the screen.
![Page 6: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/6.jpg)
Page 6
Basic Example (2/2)
1. Graphic ▶ Basics of Graphics Processing
![Page 7: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/7.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/8.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/9.jpg)
Page 9
The form of general use of the TouchEvent
1. Graphic ▶ Touch Events
![Page 10: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/10.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/11.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/12.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/13.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/14.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/15.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/16.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/17.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/18.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/19.jpg)
Page 19
Basic Example
2. Image ▶ Basic of Bitmap
![Page 20: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/20.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/21.jpg)
Page 21
Example
2. Image ▶ Geometric transformation of image
![Page 22: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/22.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/23.jpg)
Page 23
Example
2. Image ▶ Using image
![Page 24: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/24.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/25.jpg)
Page 25
Example
2. Image ▶ Using image
![Page 26: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/26.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/27.jpg)
Page 27
Example
2. Image ▶ Using image
![Page 28: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/28.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/29.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/30.jpg)
Page 30
Design the Screen 2
2. Image
[Practice 8-2] Create a mini Photoshop (3/9)
![Page 31: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/31.jpg)
Page 31
Java coding 1-1
2. Image
[Practice 8-2] Create a mini Photoshop (4/9)
![Page 32: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/32.jpg)
Page 32
Java coding 1-2
2. Image
[Practice 8-2] Create a mini Photoshop (5/9)
![Page 33: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/33.jpg)
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: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/34.jpg)
Page 34
Java coding 3 : rotation icon
회전에 사용될 전역변수를 선언
회전 아이콘 클릭 리스너를 생성
onDraw( )에 Cavas.rotate( ) 메소드를 추가
2. Image
[Practice 8-2] Create a mini Photoshop (7/9)
![Page 35: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/35.jpg)
Page 35
Java coding 4 : lighten icon
화면 밝기에 사용될 전역변수를 선언 / 밝게하기 아이콘 클릭 리스너를 생성
onDraw( )에 컬러 매트릭스를 적용
2. Image
[Practice 8-2] Create a mini Photoshop (8/9)
![Page 36: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/36.jpg)
Page 36
Java coding 5 : gray image icon
채도에 사용될 전역변수를 선언 / 회색 영상 아이콘 클릭 리스너를 생성
onDraw( )에 채도 설정을 적용
2. Image
[Practice 8-2] Create a mini Photoshop (9/9)
![Page 37: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/37.jpg)
Page 37
Change the [Practice 8-2]
Add other function
[Self Test 8-3]
2. Image
![Page 38: 08. Graphic and Image - ict.edu.mnict.edu.mn/uploaded/file_manager/files/08 Graphic and Image.pdf · Page 4 Overview (2/2) Commonly used form when the View class to override the express](https://reader031.vdocuments.mx/reader031/viewer/2022040601/5e939ed349821b52d2144471/html5/thumbnails/38.jpg)
DKU-MUST Mobile ICT Education Center