안드로이드 선 그리기(drawPath)

---

1. 선 그리기

사용자로부터 터치를 입력받아 화면에 곡선을 그려보자.

기본적으로 앞선 포스팅에서 알아봤던 TouchEvent를 활용한 예제다.

 

캔버스에 선 그리기 예제 테스트를 위해 다음과 같은 순서로 코드를 작성한다.

• SinglleTouchView.java 작성
• MainActivity.java 작성

화면을 터치하여 자유자재로 낙서를 할 수 있는 낙서장을 구현해보자.

• 화면을 터치하여 선을 그리는 앱을 구현한다.
• 그래픽에서 제공하는 Path 객체를 이용하여 점의 좌표를 누적시킨다.
• 누적된 점이 연결되며 터치하여 이동한 대로 선이 만들어진다.

 

1) SingleTouchView.java

이 예제에서는 특별히 레이아웃 코드를 작성할 필요가 없다.

먼저 다음과 같이 선을 그리기 위한 코드를 작성한다.

public class SingleTouchView extends View {
    private Paint paint = new Paint();
    private Path path = new Path();

    public SingleTouchView(Context context, AttributeSet attrs) {
        super(context, attrs);

        paint.setAntiAlias(true);
        paint.setStrokeWidth(10f);
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(path, paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float eventX = event.getX();
        float eventY = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                path.moveTo(eventX, eventY);
                return true;
            case MotionEvent.ACTION_MOVE:
                path.lineTo(eventX, eventY);
                break;
            case MotionEvent.ACTION_UP:
                break;
            default:
                return false;
        }
        invalidate();
        return true;
    }
}

선분을 매끄럽게 그리기 위해 setAntiAlias()를 설정한다.

선분의 두께를 지정하기 위해 setStrokeWidth()를 설정한다.

canvas에서는 drawPath()를 통해 현재까지의 모든 경로를 그려준다.

onTouchEvent() 메서드에서 모션에 관련된 이벤트를 작성한다.

 

• paint.setAntiAlias(true)
  선분을 매끄럽게 그려준다.
• paint.setStrokeWidth(10f)
  선분의 두께를 10으로 지정한다.
• canvas.drawPath(path, paint)
  현재까지의 경로를 모두 그려준다.
• event.getX() / event.getY()
  마우스가 터치된 위치를 얻는다.
• path.moveTo(eventX, eventY)
  터치가 눌려지면 경로에 위치를 저장한다.
• path.lineTo(eventX, eventY)
  터치가 떼어지면 경로에 직선그리기를 저장한다.

 

2) MainActivity.java

다음과 같이 MainAtivity에 SingleTouchView를 연결한다.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new SingleTouchView(this, null));
    }
}

---

2. 실행 결과

작성한 테스트 앱을 실행해보면 다음과 같이 구동되는 것을 확인할 수 있다.

구현하고자 했던대로 화면을 터치하여 원하는대로 선을 그려준다.