페인트보드(그림판) 만들기

https://nangchobi.tistory.com/260

https://developer.android.com/training/custom-views/custom-drawing?hl=ko

 

 

소스 코드에서 그래픽을 그리는 것이 아니라 사용자가 화면을 터치하면서 직접 그릴 수 있게 하려면,

손가락으로 터치하는 방식의 터치 이벤트를 처리하여 빈 화면 위에 손가락으로 그림을 그릴 수 있는 형태인 페인트보드가 필요하다

onTouchEvent 메소드로 터치한 곳의 좌표 값을 이용하여 그리기 기능을 구현하는 것이다

터치 이벤트가 동작하는 방식은 눌렀을 때, 누른 상태로 움직일 때, 떼었을 때로 나눌 수 있다

각각의 경우에 이벤트를 처리하면서 drawLine 메소드로 선을 그리면 된다

페인트보드는 실제 업무용으로 많이 사용되는 물류/택배 분야에서 고객들에게 사인을 받을 때 사용되고 한다

 

PaintBoard.java

package com.example.a69_sample_paintboard;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

public class PaintBoard extends View {

    Canvas mCanvas;
    Bitmap mBitmap;
    Paint mPaint;

    int lastX;
    int lastY;

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

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

    private void init(Context context) {
        this.mPaint = new Paint();
        this.mPaint.setColor(Color.BLACK);

//        좌표를 -1로 설정
        this.lastX = -1;
        this.lastY = -1;
    }

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        Bitmap img = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas();
        canvas.setBitmap(img);
        canvas.drawColor(Color.WHITE);

        mBitmap = img;
        mCanvas = canvas;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mBitmap != null) {
            canvas.drawBitmap(mBitmap, 0, 0, null);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int action = event.getAction();

        int X = (int) event.getX();
        int Y = (int) event.getY();

        switch (action) {
            case MotionEvent.ACTION_UP:
                lastX = -1;
                lastY = -1;

                break;

            case MotionEvent.ACTION_DOWN:
                if (lastX != -1) {
                    if (X != lastX || Y != lastY) {
                        mCanvas.drawLine(lastY, lastY, X, Y, mPaint);
                    }
                }

                lastX = X;
                lastY = Y;

                break;

            case MotionEvent.ACTION_MOVE:
                if (lastX != -1) {
                    mCanvas.drawLine(lastX, lastY, X, Y, mPaint);
                }

                lastX = X;
                lastY = Y;

                break;
        }

        invalidate();

        return true;
    }
}

 

 

MainActivity

package com.example.a69_sample_paintboard;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);

        PaintBoard paintBoard = new PaintBoard(this);

        setContentView(paintBoard);
    }

}

 

 

 

선이 부드러운 곡선이 아니라 일부분이 직선으로 그려지는 경우가 생긴다

터치 이벤트를 처리할 때 직선으로 각각의 좌표 값을 처리했기 때문이다

 

 

Path 메소드를 이용하면 연속적인 점들을 이용하여 직선 또는 부드러운 곡선을 그릴 수 있다

아크 또는 커브로 표현되는 곡선 그리기 방법은 drawLine 메소드를 이용하여 직선을 그려 점들을 연결할 때 발생하는 격자형의 딱딱함을 없앨 수 있다

 

 

BestPainBoard.java

package com.example.a69_sample_paintboard;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

public class BestPaintBoard extends View {

    public boolean changed = false;

    Canvas mCanvas;
    Bitmap mBitmap;
    Paint mPaint;

    float lastX;
    float lastY;

    Path mPath = new Path();

    float mCurveEndX;
    float mCurveEndY;

    int mInvalidateExtraBorder = 10;

    static final float TOUCH_TOLERANCE = 8;

    public BestPaintBoard(Context context) {
        super(context);

        init(context);
    }

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

        init(context);
    }

    private void init(Context context) {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(3.0F);

        this.lastX = -1;
        this.lastY = -1;
    }

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        Bitmap img = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas();
        canvas.setBitmap(img);
        canvas.drawColor(Color.WHITE);

        mBitmap = img;
        mCanvas = canvas;

    }

    protected void onDraw(Canvas canvas) {
        if (mBitmap != null) {
            canvas.drawBitmap(mBitmap, 0, 0, null);
        }
    }

    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();

        switch (action) {
            case MotionEvent.ACTION_UP:
                changed = true;

                Rect rect = touchUp(event, false);
                if (rect != null) {
                    invalidate(rect);
                }

                mPath.rewind();

                return true;

            case MotionEvent.ACTION_DOWN:
                rect = touchDown(event);
                if (rect != null) {
                    invalidate(rect);
                }

                return true;

            case MotionEvent.ACTION_MOVE:
                rect = touchMove(event);
                if (rect != null) {
                    invalidate(rect);
                }

                return true;
        }

        return false;
    }

    private Rect touchDown(MotionEvent event) {

        float x = event.getX();
        float y = event.getY();

        lastX = x;
        lastY = y;

        Rect mInvalidRect = new Rect();
        mPath.moveTo(x, y);

        final int border = mInvalidateExtraBorder;
        mInvalidRect.set((int) x - border, (int) y - border, (int) x + border, (int) y + border);

        mCurveEndX = x;
        mCurveEndY = y;

        mCanvas.drawPath(mPath, mPaint);

        return mInvalidRect;
    }

    private Rect touchMove(MotionEvent event) {
        Rect rect = processMove(event);

        return rect;
    }

    private Rect touchUp(MotionEvent event, boolean cancel) {
        Rect rect = processMove(event);

        return rect;
    }

    private Rect processMove(MotionEvent event) {

        final float x = event.getX();
        final float y = event.getY();

        final float dx = Math.abs(x - lastX);
        final float dy = Math.abs(y - lastY);

        Rect mInvalidRect = new Rect();
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            final int border = mInvalidateExtraBorder;
            mInvalidRect.set((int) mCurveEndX - border, (int) mCurveEndY - border,
                    (int) mCurveEndX + border, (int) mCurveEndY + border);

            float cX = mCurveEndX = (x + lastX) / 2;
            float cY = mCurveEndY = (y + lastY) / 2;

            mPath.quadTo(lastX, lastY, cX, cY);

            mInvalidRect.union((int) lastX - border, (int) lastY - border,
                    (int) lastX + border, (int) lastY + border);

            mInvalidRect.union((int) cX - border, (int) cY - border,
                    (int) cX + border, (int) cY + border);

            lastX = x;
            lastY = y;

            mCanvas.drawPath(mPath, mPaint);
        }

        return mInvalidRect;
    }


}

 

MainActivity

package com.example.a69_sample_paintboard;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);

        PaintBoard paintBoard = new PaintBoard(this);
        BestPaintBoard bestPaintBoard = new BestPaintBoard(this);

        setContentView(bestPaintBoard);
    }

}

 

onTouchEvent 메소드 내에서 이벤트를 처리할 때 각각의 이벤트를 touchUp, touchMove와 같은 별도의 메소드로 분리하고 변경된 영역만을 메소드로 분리하고, 변경된 영역만을 다시 그리게 해서 코드 및 그리기 성능을 향상시킨 것이라고 한다

touchMove 메소드를 보면 터치된 좌표 값을 moveTo 메소드로 패스에 추가한 후 그리는 부분과 그려지는 영역에 대한 정보를 만들어 결과 값으로 반환한다

 

터치할 때 좌표 값은 moveTo 또는 quaaTo 메소드로 Path 객체에 추가하는데, 새로운 좌표 값이 위치하는 영역을 Rect 객체에도 포함되도록 만들어서 invalidate 메소드로 뷰를 다시 그릴 때 Rect 객체의 영역만큼 다시 그리도록 한다