컴퓨터/이론: 안드로이드
[2017.09.25] 18. Android 그림판(DrawPad) 프로젝트 [점을 선으로 변경]
heepie
2017. 9. 25. 00:41
이전 프로젝트(http://heepie.tistory.com/95)를 통해 색과 두께 설정에 따른 점 그림판은 완료하였다.
이번에는 해당 점을 선으로 바꿔보자.
선으로 변경하기 위해 Path 클래스를 사용할 예정이고 변경에 따른 코드 변화를 확인해보자.
소스 코드
- CustomView
|
점 |
선 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 |
public class CustomView extends View {
// ...
// 색이나 두께가 변할 때마다 독립적으로 Paint와 r를 설정
public void setPaintInfo(int color, float r) {
paint = new Paint();
paint.setColor(color);
this.r = r;
}
// ...
@Override
protected void onDraw(Canvas canvas) {
for (PosInfo p : data) {
// 포인트 별로 각각 설정에 맞게 Draw
canvas.drawCircle(p.getX(),
p.getY(),
p.getR(),
p.getPaint());
}
super.onDraw(canvas);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// 터치한 위치 값 추출
x = event.getX();
y = event.getY();
// Pos 클래스를 생성해 데이터 저장 후
// List에 추가
PosInfo posInfo = new PosInfo(x, y);
// 각각에 점에 paint와 r 설정
posInfo.setPaint(paint);
posInfo.setR(r);
data.add(posInfo);
// 화면을 강제로 그리기 위해 호출하는 메소드
invalidate();
return true;
}
// ...
}
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56 |
public class CustomView extends View {
// ...
private PathInfo pathInfo;
// 색이나 두께가 변할 때마다 독립적으로 Paint와 r를 설정
public void setPaintInfo(int color, float r) {
paint = new Paint();
paint.setColor(color);
// '선' 설정을 위해
paint.setStyle(Paint.Style.STROKE);
// 선 두께 설정
paint.setStrokeWidth(r);
pathInfo = new PathInfo();
pathInfo.setPaint(paint);
}
// ...
@Override
protected void onDraw(Canvas canvas) {
for (PathInfo p : data) {
// 선 Draw
canvas.drawPath(p, p.getPaint());
}
super.onDraw(canvas);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
// View가 눌렸다면
case MotionEvent.ACTION_DOWN:
pathInfo.moveTo(event.getX(), event.getY());
break;
// View를 누르고 이동했다면
case MotionEvent.ACTION_MOVE:
pathInfo.lineTo(event.getX(), event.getY());
break;
// View에서 터치를 떼었다면
case MotionEvent.ACTION_UP:
break;
}
data.add(pathInfo);
// 화면을 강제로 그리기 위해 호출하는 메소드
invalidate();
return true;
}
// ...
}
|
cs | |
- PathInfo Class
|
점 |
선 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 |
/**
* X, Y 좌표, Paint, r을 저장하는 PosInfo 클래스
*/
class PosInfo {
private float x, y, r;
private Paint paint;
PosInfo(float x, float y) {
this.x = x;
this.y = y;
}
public float getX() {
return x;
}
public float getY() {
return y;
}
public void setPaint(Paint paint) {
this.paint = paint;
}
public Paint getPaint() {
return paint;
}
public float getR() {
return r;
}
public void setR(float r) {
this.r = r;
}
}
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
/**
* Path마다 Paint 객체를 사용하기 위해 Path 클래스 상속
*/
class PathInfo extends Path {
private Paint paint;
PathInfo() {
paint = new Paint();
}
public Paint getPaint() {
return paint;
}
public void setPaint(Paint paint) {
this.paint = paint;
}
}
|
cs
| |
- MainActivity
MainActivity는 이전 프로젝트와 동일
스크린 샷
#안드로이드 그림판 만들기 #안드로이드 Paint #안드로이드 Path #Custom view