본문 바로가기

ANDROID/UI - UX

[안드로이드] Canvas를 활용해 커스텀 뷰에 선 그리기 (drawPath)

안드로이드 Canvas의 drawLine() 을 활용해 그래픽 위에 선을 그리고자 하였다.


향후 다시 참고하고자 필요한 단계들과 중요사항들을 적어두고자 한다.



1. Canvas 클래스 만들기


프로젝트 안에 View를 상속받는 임의의 Canvas 클래스를 만든다. (MyCanvas, mCanvas 등)

...


public class MyCanvas extends View {

private Paint paint = new Paint();
private Path path = new Path();
private Canvas myCanvas = new Canvas();
private boolean is_first;

public MyCanvas(Context context) {
super(context);
init();
}

public MyCanvas(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public MyCanvas(Context context, AttributeSet attrs, int defStyle ){
super(context, attrs, defStyle);
init();
}

public void setPath(float input_x, float input_y) {

if (!is_first) {
path.moveTo(input_x, input_y);
is_first = true;
} else {
path.lineTo(input_x, input_y);
}

//myCanvas.drawPath(path, paint);

Log.d("test", "is drawing path");
this.draw(myCanvas);
invalidate();
}

@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);

canvas.drawPath(path, paint);
Log.d("test", "performing on draw");
}

...


여기서 중요한 점은 위에 시된 세 종류의 constructor를 명시해줘야만 null pointer exception이 발생하지 않을 수 있다. 


처음에 하나의 생성자만 써두었다가 null pointer exception이 계속 발생해서 수정 후에 이를 해결할 수 있었다.


그리고 필수적으로 오버라이드한 onDraw를 적어두고, 이 안에서 drawPath를 수행하도록 했다.


onDraw는 따로 적어둔 setPath 메소드안의 this.draw(myCanvas)로 수행된다.


myCanvas는 이 클래스 내부에 만든 Canvas 변수로 클래스와는 별개라고 보면 된다.


draw를 한번 수행한 뒤에는 invalidate()를 추가하는 걸 잊지 말자. (경우에 따라 열심히 그려도 표시하지 않는 경우가 있음)



2. Canvas를 적용할 커스텀 뷰 레이아웃에 만들기


임의로 생성한 Canvas 클래스에 맞는 이름으로 커스텀 뷰를 레이아웃에 추가한다.



3. 액티비티에서 canvas를 참조 및 활용하기


생성한 커스텀 뷰를 다른 레이아웃 참조하듯이 Canvas 클래스에 findViewById로 참조해 넣고


개발자의 입맛에 따라 임의로 생성해 둔 Canvas 클래스의 메소드를 활용해 그리고자 하는 것들을 그리면 된다.



반드시 Canvas 내부에 생성할 것은 없는것으로 보이나, 편의상 클래스 내부에 그리는 메소드를 만들어두고 활용하는게 간편하고


깔끔해보인다.



< 참조 >


https://stackoverflow.com/questions/19704048/null-pointer-exception-when-drawing-on-canvas


http://bitsoul.tistory.com/62


http://itpangpang.xyz/247