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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012964944/article/details/82703684

准备

前段时间,发布了多功能画板&开源涂鸦框架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.getX(), e.getY());
                mLastX = e.getX();
                mLastY = e.getY();
                invalidate(); // 刷新
            }

            @Override
            public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // 滑动中
                Log.d(TAG, "onScroll: " + e2.getX() + " " + e2.getY());
                mCurrentPath.quadTo(
                        mLastX,
                        mLastY,
                        (e2.getX() + mLastX) / 2,
                        (e2.getY() + mLastY) / 2); // 使用贝塞尔曲线 让涂鸦轨迹更圆滑
                mLastX = e2.getX();
                mLastY = e2.getY();
                invalidate(); // 刷新
                return true;
            }

            @Override
            public void onScrollEnd(MotionEvent e) { // 滑动结束
                Log.d(TAG, "onScrollEnd: ");
                mCurrentPath.quadTo(
                        mLastX,
                        mLastY,
                        (e.getX() + mLastX) / 2,
                        (e.getY() + mLastY) / 2); // 使用贝塞尔曲线 让涂鸦轨迹更圆滑
                mCurrentPath = null; // 轨迹结束
                invalidate(); // 刷新
            }

        });
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        boolean consumed = mTouchGestureDetector.onTouchEvent(event); // 由手势识别器处理手势
        if (!consumed) {
            return super.dispatchTouchEvent(event);
        }
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        for (Path path : mPathList) { // 绘制涂鸦轨迹
            canvas.drawPath(path, mPaint);
        }
    }
}

使用时直接在布局文件XML里添加自定义SimpleDoodleView,或者通过如下代码添加到父容器中:

// 初级涂鸦
ViewGroup simpleContainer = findViewById(R.id.container_simple_doodle);
SimpleDoodleView simpleDoodleView = new SimpleDoodleView(this);
simpleContainer.addView(simpleDoodleView, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

代码很简单,这里没有涉及到坐标换算,直接就是滑到View的哪里就直接在该位置绘制涂鸦,希望小伙伴们把上面的代码手动敲一遍,接下来就开始讲中级涂鸦啦。

中级涂鸦

中级涂鸦要实现的效果:在初级涂鸦的基础上,单击时可以选择某个涂鸦,进行移动。思路如下:

  1. 创建自定义View: MiddleDoodleView
  2. 定义PathItem类,封装涂鸦轨迹,包括Path和偏移值等信息。
    class PathItem {
        Path mPath = new Path(); // 涂鸦轨迹
        float mX, mY; // 轨迹偏移值
    }

     

  3. 单击时需要判断是否点中某个涂鸦,Path提供了接口computeBounds()计算当前图形的矩形范围,可以通过判断单击的点是否在矩形范围内判断。使用TouchGestureDetector识别单击和滑动手势。(TouchGestureDetector在我另一个项目Androids中,使用时需要导入依赖

  4. 滑动过程中需要判断当前是否有选中的涂鸦,如果有则对该涂鸦进行移动,把偏移值记录在PathItem中;没有则绘制新的涂鸦轨迹。

  5. 在MiddleDoodleView的onDraw方法中,绘制每个PathItem之前根据偏移值移动画布。

实现效果:

代码如下:

public class MiddleDoodleView extends View {

    private final static String TAG = "MiddleDoodleView";

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

    public MiddleDoodleView(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() {

            RectF mRectF = new RectF();

            @Override
            public boolean onSingleTapUp(MotionEvent e) { // 单击选中
                boolean found = false;
                for (PathItem path : mPathList) { // 绘制涂鸦轨迹
                    path.mPath.computeBounds(mRectF, true); // 计算涂鸦轨迹的矩形范围
                    mRectF.offset(path.mX, path.mY); // 加上偏移
                    if (mRectF.contains(e.getX(), e.getY())) { // 判断是否点中涂鸦轨迹的矩形范围内
                        found = true;
                        mSelectedPathItem = path;
                        break;
                    }
                }
                if (!found) { // 没有点中任何涂鸦
                    mSelectedPathItem = null;
                }
                invalidate();
                return true;
            }

            @Override
            public void onScrollBegin(MotionEvent e) { // 滑动开始
                Log.d(TAG, "onScrollBegin: ");
                if (mSelectedPathItem == null) {
                    mCurrentPathItem = new PathItem(); // 新的涂鸦
                    mPathList.add(mCurrentPathItem); // 添加的集合中
                    mCurrentPathItem.mPath.moveTo(e.getX(), e.getY());
                    mLastX = e.getX();
                    mLastY = e.getY();
                }
                invalidate(); // 刷新
            }

            @Override
            public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { // 滑动中
                Log.d(TAG, "onScroll: " + e2.getX() + " " + e2.getY());
                if (mSelectedPathItem == null) { // 没有选中的涂鸦
                    mCurrentPathItem.mPath.quadTo(
                            mLastX,
                            mLastY,
                            (e2.getX() + mLastX) / 2,
                            (e2.getY() + mLastY) / 2); // 使用贝塞尔曲线 让涂鸦轨迹更圆滑
                    mLastX = e2.getX();
                    mLastY = e2.getY();
                } else { // 移动选中的涂鸦
                    mSelectedPathItem.mX = mSelectedPathItem.mX - distanceX;
                    mSelectedPathItem.mY = mSelectedPathItem.mY - distanceY;
                }
                invalidate(); // 刷新
                return true;
            }

            @Override
            public void onScrollEnd(MotionEvent e) { // 滑动结束
                Log.d(TAG, "onScrollEnd: ");
                if (mSelectedPathItem == null) {
                    mCurrentPathItem.mPath.quadTo(
                            mLastX,
                            mLastY,
                            (e.getX() + mLastX) / 2,
                            (e.getY() + mLastY) / 2); // 使用贝塞尔曲线 让涂鸦轨迹更圆滑
                    mCurrentPathItem = null; // 轨迹结束
                }
                invalidate(); // 刷新
            }

        });
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        boolean consumed = mTouchGestureDetector.onTouchEvent(event); // 由手势识别器处理手势
        if (!consumed) {
            return super.dispatchTouchEvent(event);
        }
        return true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        for (PathItem path : mPathList) { // 绘制涂鸦轨迹
            canvas.save(); // 1.保存画布状态,下面要变换画布
            canvas.translate(path.mX, path.mY); // 根据涂鸦轨迹偏移值,偏移画布使其画在对应位置上
            if (mSelectedPathItem == path) {
                mPaint.setColor(Color.YELLOW); // 点中的为黄色
            } else {
                mPaint.setColor(Color.RED); // 其他为红色
            }
            canvas.drawPath(path.mPath, mPaint);
            canvas.restore(); // 2.恢复画布状态,绘制完一个涂鸦轨迹后取消上面的画布变换,不影响下一个
        }
    }

    /**
     * 封装涂鸦轨迹对象
     */
    private static class PathItem {
        Path mPath = new Path(); // 涂鸦轨迹
        float mX, mY; // 轨迹偏移值
    }
}

使用时直接在布局文件XML里添加自定义MiddleDoodleView,或者通过如下代码添加到父容器中:

// 中级涂鸦
ViewGroup middleContainer = findViewById(R.id.container_middle_doodle);
MiddleDoodleView middleDoodleView = new MiddleDoodleView(this);
middleContainer.addView(middleDoodleView, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

中级涂鸦的代码也不多,由于先前的涂鸦可以移动,所以在绘制涂鸦时需要根据移动的偏移值偏移画布。这里简单应用了矩阵变换的知识,如果不太理解的小伙伴也不用着急,后面的高级涂鸦中会降到矩阵变换的知识。

后续

初中级的涂鸦并没有涉及到对图片的操作,所以相对简单点,希望大伙可以理解透他们的原理,后面的高级涂鸦讲涉及到图片操作,对图片进行缩放移动,就相对复杂很多,我会尽全力讲解明白的~因此后面会单独出一篇文章讲解,请大家多多关注和支持!谢谢!!!

上面的代码在我的开源框架的Demo里>>>>Doodle涂鸦原理教程代码

最后请大家多多支持我的项目>>>>开源项目Doodle!一个功能强大,可自定义和可扩展的涂鸦框架、多功能画板。

没有更多推荐了,返回首页