| Android涂鸦画板原理详解 | 您所在的位置：网站首页 › 简单的涂鸦画 › Android涂鸦画板原理详解 |
Android涂鸦画板原理详解
|
准备
前段时间，发布了多功能画板&开源涂鸦框架Doodle，得到了一些小伙伴的关注。但由于框架代码较多，一开始较难理解，有不少人询问了相关的实现细节。我发现不少初学者对基本的涂鸦原理不熟悉，因此我决定写一些简单的例子，用于说明最基本的的涂鸦原理，这也是多功能画板&开源涂鸦框架Doodle最核心的地方。 好的，在讲解之前，我希望小伙伴们对View的绘制流程有一定的了解，还不熟悉的同学可以先看看我之前的文章《View的绘制流程》，因为下面的涂鸦我们用到了自定义View的知识。 初级涂鸦我们要实现最简单的涂鸦，手指在屏幕上滑动时绘制滑动轨迹。思路如下： 创建自定义View: SimpleDoodleView使用TouchGestureDetector识别滑动手势。（TouchGestureDetector在我另一个项目Androids中，使用时需要导入依赖）将手势滑动的点记录在系统类Path中。Path可以支持贝塞尔曲线等各种图形的绘制。在自定义View的onDraw方法中通过Canvas.drawPath()绘制记录的Path，把涂鸦轨迹绘制出来。实现效果： 代码如下： public class SimpleDoodleView extends View { private final static String TAG = "SimpleDoodleView"; private Paint mPaint = new Paint(); private List 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的哪里就直接在该位置绘制涂鸦，希望小伙伴们把上面的代码手动敲一遍，接下来就开始讲中级涂鸦啦。 中级涂鸦中级涂鸦要实现的效果：在初级涂鸦的基础上，单击时可以选择某个涂鸦，进行移动。思路如下： 创建自定义View: MiddleDoodleView定义PathItem类，封装涂鸦轨迹，包括Path和偏移值等信息。 class PathItem { Path mPath = new Path(); // 涂鸦轨迹 float mX, mY; // 轨迹偏移值 }
单击时需要判断是否点中某个涂鸦，Path提供了接口computeBounds()计算当前图形的矩形范围，可以通过判断单击的点是否在矩形范围内判断。使用TouchGestureDetector识别单击和滑动手势。（TouchGestureDetector在我另一个项目Androids中，使用时需要导入依赖） 滑动过程中需要判断当前是否有选中的涂鸦，如果有则对该涂鸦进行移动，把偏移值记录在PathItem中；没有则绘制新的涂鸦轨迹。 在MiddleDoodleView的onDraw方法中，绘制每个PathItem之前根据偏移值移动画布。 实现效果： 代码如下： public class MiddleDoodleView extends View { private final static String TAG = "MiddleDoodleView"; private Paint mPaint = new Paint(); private List 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！一个功能强大，可自定义和可扩展的涂鸦框架、多功能画板。 |
【本文地址】
公司简介
联系我们