从零开始实现Android自定义手写画板

从零开始实现Android自定义手写画板

最近需要实现一个手写签名控件，在搜索多轮后，终于实现了效果，但是一个手写签名，涉及到了自定义View，画板，path等知识发现自己还是有挺多地方不清楚的，下面从零开始实现一个自定义画板，也一个个解释用到的知识点，算是对手写签名用到所需知识的一个总结。

手写顾名思义是在屏幕中获取若干不连续的点，然后把这些点连成一条线。

1.构造方法里面初始化画布背景、画笔、和路径

public class PaintView extends View {
    
    private Paint mPaint;
    private Canvas cacheCanvas;
    private Path mPath;
    private Bitmap mCachebBitmap;
    
    public PaintView(Context context) {
        super(context);
    }

    public PaintView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    
    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(4.0f);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.BLACK);
        mPath = new Path();
    }
}

Paint

我们知道在画板上画画，需要一直画笔，Paint 类你可以想象它就是一支画笔，通过Paint ，你可以设置画笔的大小，颜色等等。

Path

Path 封装了直线，二次曲线和三次曲线组成的复合路径，在手写签名中，我们每在屏幕中移动，就会产生一个路径，我们需要把这个路径通过Path记录下来，在配合Canvas .drawPath(Path path,Paint paint)绘制在画板上。

2.初始化画板

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {   		             super.onMeasure(widthMeasureSpec, heightMeasureSpec);   
    mCachebBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(),         Bitmap.Config.ARGB_8888);    
    cacheCanvas = new Canvas(mCachebBitmap); //canvas绘制的内容，将会在这个mCachebBitmap内   
}

在onMeasure中，等控件初始化完成，可以获取宽高时，初始化缓存的Bitmap和画板。

下面附上完整的代码

public class PaintView extends View {

    AttributeSet attrs;
    private Paint mPaint;
    private Canvas cacheCanvas;
    private Path mPath;
    private Bitmap mCachebBitmap;

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

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

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(4.0f);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.BLACK);
        
        mPath = new Path();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mCachebBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        //canvas绘制的内容，将会在这个mBufferBitmap内
        cacheCanvas = new Canvas(mCachebBitmap);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mCachebBitmap, 0, 0, null);
    }

    private float mLastTouchX, mLastTouchY;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float eventX = event.getX();
        float eventY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                mPath.moveTo(eventX, eventY);
                mLastTouchX = eventX;
                mLastTouchY = eventY;
                break;
            }

            case MotionEvent.ACTION_MOVE:
                mPath.quadTo(mLastTouchX, mLastTouchY, eventX, eventY);
                //在缓存里面绘制
                cacheCanvas.drawPath(mPath, mPaint);
                //重新绘制，会调用onDraw方法
                invalidate();
                mLastTouchX = eventX;
                mLastTouchY = eventY;
                break;
            case MotionEvent.ACTION_UP: {
                mPath.reset();
                break;
            }
        }
        return true;
    }
}

现在一个最简单手写画板就实现了

可以发现实现手写的重点在于onTouchEvent方法中，那么我们来看看该方法。

当我们手指落下屏幕时，触发onTouchEvent的MotionEvent.ACTION_DOWN回调，调用了mPath.moveTo(eventX, eventY)，这里可以把path的起始坐标移动到eventX，eventY，即我们手指落下的位置。

当我们手指在屏幕中移动时，触发MotionEvent.ACTION_MOVE，调用了mPath.quadTo(mLastTouchX, mLastTouchY, eventX, eventY); 把我们手指落下屏幕的坐标mLastTouchX，mLastTouchY作为起点，手指移动的终点坐标eventX，eventY，用来绘制一个曲线。

cacheCanvas.drawPath(mPath, mPaint);

后需要把这个路径存储起来，并调用invalidate();方法，这时会回调

@Override
protected void onDraw(Canvas canvas) {    
    canvas.drawBitmap(mCachebBitmap, 0, 0, null);
}

这时才真正的把手写线画到了界面上。

当然后续还有刷新优化，导出图片，擦除画笔等内容，这些我们后边继续。