[2017.09.25] 18. Android 그림판(DrawPad) 프로젝트 [점을 선으로 변경]

이전 프로젝트(http://heepie.tistory.com/95)를 통해 색과 두께 설정에 따른 점 그림판은 완료하였다.

이번에는 해당 점을 선으로 바꿔보자.

선으로 변경하기 위해 Path 클래스를 사용할 예정이고 변경에 따른 코드 변화를 확인해보자.

소스 코드

- CustomView

점

선

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; } // ... }

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;     }     // ... } Colored by Color Scripter cs

- PathInfo Class

점

선

/** * 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; } }

/** * 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; } }

- MainActivity

MainActivity는 이전 프로젝트와 동일

스크린 샷

#안드로이드 그림판 만들기 #안드로이드 Paint #안드로이드 Path #Custom view