안드로이드 Canvas, Paint 사용하기

안드로이드 Canvas, Paint 사용하기

간단하게 말하면 Canvas는 도화지, Paint는 붓이라고 할 수 있습니다.

Paint에서 선의 굵기, 색상, 모양등을 선택해서 다양한 형태로 그릴 수 있습니다.

• View를 상속받는 Custom클래스를 생성
• Canvas에 그리고 싶은 내용을 onDraw에 코딩

Paint에서 사용되는 메소드

• setColor(int color) - Paint의 색상 설정
  
• setStrokeWidth(float width) - Paint의 굵기를 설정
• setStyle(Paint.Style style) - Paint 스타일을 설정
• setTextSize(float textSize) - Paint의 글자 크기를 설정
• setAntiAlias(boolean aa) - Paint의 경계면을 부드럽게 처리할지 설정

등등..

Canvas에서 사용되는 메소드

• void drawRect(left, top, right, bottom) - (left, top) 와 (right, bottom)를 대각선으로 가지는 사각형을 그림
• void drawText(text, x, y, paint) - (x,y) 좌표에 문자를 출력
  
• void drawLine(startX, startY, stopX, stopY, paint) - (x,y) 좌표부터 (x,y) 좌표에 선을 그림
  
• void drawBitmap(Bitmap bitmap, float left, float top, Paint paint) - 왼쪽 모서리 좌표를 (x,y)로 가지는  bitmap 을 그림
  

등등..

public class MyCanvas extends View {

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

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

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

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        canvas.drawRect(10, 10, 100, 100, paint);

    }
}

Canvas에 이미지 그리기

Bitmap img = BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher);
canvas.drawBitmap(img, 300, 350, paint);

만약 이미지를 작게 또는 크게 그리고 싶을때는 createScaledBitmap을 사용합니다.

Bitmap smallimg = Bitmap.createScaledBitmap(img, img.getWidth()/2, img.getHeight()/2, false);
canvas.drawBitmap(smallimg, 400, 350, paint);

Bitmap bigimg = Bitmap.createScaledBitmap(img, img.getWidth()*2, img.getHeight()*2, false);
canvas.drawBitmap(bigimg, 100, 200, paint);

Touch event 추가하기

-Canvas에 touch event를 추가하려면 onTouchEvent메소드를 Override하고 

 return 값이 false일 경우 touch event를 받지 않겠다는 것이므로 return 값을 true로 해줘야합니다

화면에 터치된 x좌표와 y좌표는 .getX(), getY()를 통해 알 수 있습니다.

getX와 getY의 반환 값은 float이므로 int에 값을 저장하고 싶으면 형변환을 해줘야합니다.

@Override
public boolean onTouchEvent(MotionEvent event) {
    int x = (int)event.getX();
    int y = (int)event.getY();
    invalidate();
    return true; 
}

Mask Filter 추가하기

1) View의 LayerType을 Software로 변경

public MyCanvas(Context context) {
    super(context);
    this.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

2) BlurMaskFilter를 생성해서 Paint 요소에 적용

- 첫번째 인자는 Blur의 정도 두번째 인자는 Blur를 줄 타입입니다.

BlurMaskFilter blur = new BlurMaskFilter(100,
        BlurMaskFilter.Blur.INNER);
mPaint.setMaskFilter(blur);

아래 예제는 Canvas, Paint, 더블 버퍼링을 사용한 예제입니다.

코드는 깃허브에서 볼 수 있습니다.

https://github.com/Ywook/AndroidPractice10