Android 开源绘画板项目 （ScaleSketchPadDemo）

Android绘画板SketchPad工具

尊重原创：项目可以在 我的Github 下载
喜欢的可以给个star，欢迎持续交流

周末没什么事情，写了一个画图板Demo（ScaleSketchPadDemo），发出来与大家分享

ScaleSketchPadDemo详细介绍

此项目包含两个模块
1. app1 为普通绘画板
2. app2 为可所发的绘画板

方便各位Android 开发者理解和使用

普通绘画板

有五大功能：
1. 普通绘画
2. 在图片上绘画
3. 改变画笔颜色
4. 改变画笔粗细
5. 撤销操作
6. 添加图片

绘画功能

在图片上绘画

改变画笔颜色

改变画笔粗细

添加图片

可缩放的绘画板

app2 增加了缩放功能

双手缩放平移VS普通状态

如何实现？

技术点：

1. 画笔的细节不说了，可以去Paint API找

2. 橡皮擦的效果 Paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));

   PorterDuff.Mode一共有16种混合模式，我全都试过一遍，有兴趣的可以试试效果

   本项目使用 PorterDuff.Mode.DST_CLEAR 实现橡皮擦效果

3. 绘制过程使用双缓存，具体可以看LineView中onDraw实现，以解决“黑线条”的Bug

4. 分层思想：

   • Borderview负责手势的分发dispatch和处理ontouch
   • Borderview中包含Imageview展示图片
     Lineview画线操作
   • LineView负责接收单手手势，创建MarkPath对象，完成单手操作
   • MarkPath是最终具备绘画能力的对象，所有的绘画功能都定制在MarkPath中，包含每个Point的设计，Path的设计，详情看Demo

5. 画笔粗细和画笔颜色都是SelectView的功能，根据不同类型的Type，显示选择粗细和选择颜色界面

6. 手势细节：

   • 双手缩放：Borderview的dispatchTouchEvent分发手势
     
     • 通过 case MotionEvent.ACTION_DOWN:
       return mLineView.onTouchEvent(event);将手势传递给LineView，
     • 在MotionEvent.ACTION_UP时，控制LineView和Imageview缩放
   • 单手触摸画线的细节：业务逻辑都在onTouch中
     
     • 一是双手触摸（MotionEvent.ACTION_POINTER_DOWN:）的时候break结束此次手势操作
     • 二是单手触摸，通过（MotionEvent.ACTION_MOVE）进行画线操作

7. 加入缩放效果后的难点：

   • 背景图片如何居中，
   • 背景如何不越界（超出屏幕范围）
   • 缩放后，线条（Path）如何保持原有的宽度（StrockWidth）进行绘制
   • 缩放后，绘制线条偏移解决方案

8. MarkPath所体现的面向对象的思想

   本实例中，具备绘画功能的是MarkPath对象，Borderview和Lineview只是分发处理手势事件而已

9. 自定义相机 详情可以看我的博客：

   http://blog.csdn.net/chivalrousman/article/details/51890716

10. 读取系统相册的图片 可以参考我的博客:

    http://blog.csdn.net/chivalrousman/article/details/51771164

11. 写本项目的兴趣，来源于6年前的一篇博客：

    http://blog.sina.com.cn/s/blog_5f8817250100lqk0.html

总结

1. 物理世界的事件传递：自外向内，自顶向下传递流程，至于“事件消费”只是辅助而已，重要的是传递流程

2. MarkPath 体现的 面向对象 思想

3. Borderview和Lineview的 分层思想

4. dispatchTouchEvent（) 如何分发事件

用法

demo apk体验下载

demo2 apk体验下载

用法：

进入项目根目录：github.com/ShaunSheep/…

clone or download 项目到本地，

打开Android Studio—>file—>new—>import new moudle—>选中本地的app或aap2