Android涂鸦画板原理详解——从初级到高级（一）

准备

前段时间，发布了多功能画板&开源涂鸦框架Doodle，得到了一些小伙伴的关注。但由于框架代码较多，一开始较难理解，有不少人询问了相关的实现细节。我发现不少初学者对基本的涂鸦原理不熟悉，因此我决定写一些简单的例子，用于说明最基本的的涂鸦原理，这也是多功能画板&开源涂鸦框架Doodle最核心的地方。

好的，在讲解之前，我希望小伙伴们对View的绘制流程有一定的了解，还不熟悉的同学可以先看看我之前的文章《View的绘制流程》，因为下面的涂鸦我们用到了自定义View的知识。

初级涂鸦

我们要实现最简单的涂鸦，手指在屏幕上滑动时绘制滑动轨迹。思路如下：

1. 创建自定义View: SimpleDoodleView
2. 使用TouchGestureDetector识别滑动手势。（TouchGestureDetector在我另一个项目Androids中，使用时需要导入依赖）
3. 将手势滑动的点记录在系统类Path中。Path可以支持贝塞尔曲线等各种图形的绘制。
4. 在自定义View的onDraw方法中通过Canvas.drawPath()绘制记录的Path，把涂鸦轨迹绘制出来。

实现效果：

代码如下：

public class SimpleDoodleView extends View {

    private final static String TAG = "SimpleDoodleView";

    private Paint mPaint = new Paint();
    private List<Path> mPathList = new ArrayList<>(); // 保存涂鸦轨迹的集合
    private TouchGestureDetector mTouchGestureDetector; // 触摸手势监听
    private float mLastX, mLastY;
    private Path mCurrentPath; // 当前的涂鸦轨迹

    public SimpleDoodleView(Context context) {
        super(context);
        // 设置画笔
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(20);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeCap(Paint.Cap.ROUND);

        // 由手势识别器处理手势
        mTouchGestureDetector = new TouchGestureDetector(getContext(), new TouchGestureDetector.OnTouchGestureListener() {

            @Override
            public void onScrollBegin(MotionEvent e) { // 滑动开始
                Log.d(TAG, "onScrollBegin: ");
                mCurrentPath = new Path(); // 新的涂鸦
                mPathList.add(mCurrentPath); // 添加的集合中
                mCurrentPath.moveTo(e