#Android绘画板SketchPad工具
尊重原创:项目可以在 我的Github 下载
喜欢的可以给个star,欢迎持续交流
周末没什么事情,写了一个画图板Demo(ScaleSketchPadDemo),发出来与大家分享
ScaleSketchPadDemo详细介绍
此项目包含两个模块
- app1 为普通绘画板
- app2 为可所发的绘画板
方便各位Android 开发者理解和使用
普通绘画板
有五大功能:
- 普通绘画
- 在图片上绘画
- 改变画笔颜色
- 改变画笔粗细
- 撤销操作
- 添加图片
绘画功能
在图片上绘画
改变画笔颜色
改变画笔粗细
添加图片
可缩放的绘画板
app2 增加了缩放功能
双手缩放平移VS普通状态
#如何实现?
技术点:
-
画笔的细节不说了,可以去Paint API找
-
橡皮擦的效果 Paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
PorterDuff.Mode一共有16种混合模式,我全都试过一遍,有兴趣的可以试试效果
本项目使用 PorterDuff.Mode.DST_CLEAR 实现橡皮擦效果
-
绘制过程使用双缓存,具体可以看LineView中onDraw实现,以解决“黑线条”的Bug
-
分层思想:
- Borderview负责手势的分发dispatch和处理ontouch
- Borderview中包含Imageview展示图片
Lineview画线操作 - LineView负责接收单手手势,创建MarkPath对象,完成单手操作
- MarkPath是最终具备绘画能力的对象,所有的绘画功能都定制在MarkPath中,包含每个Point的设计,Path的设计,详情看Demo
-
画笔粗细和画笔颜色都是SelectView的功能,根据不同类型的Type,显示选择粗细和选择颜色界面
-
手势细节:
- 双手缩放:Borderview的dispatchTouchEvent分发手势
- 通过 case MotionEvent.ACTION_DOWN:
return mLineView.onTouchEvent(event);将手势传递给LineView, - 在MotionEvent.ACTION_UP时,控制LineView和Imageview缩放
- 通过 case MotionEvent.ACTION_DOWN:
- 单手触摸画线的细节:业务逻辑都在onTouch中
- 一是双手触摸(MotionEvent.ACTION_POINTER_DOWN:)的时候break结束此次手势操作
- 二是单手触摸,通过(MotionEvent.ACTION_MOVE)进行画线操作
-
加入缩放效果后的难点:
- 背景图片如何居中,
- 背景如何不越界(超出屏幕范围)
- 缩放后,线条(Path)如何保持原有的宽度(StrockWidth)进行绘制
- 缩放后,绘制线条偏移解决方案
-
MarkPath所体现的面向对象的思想
本实例中,具备绘画功能的是MarkPath对象,Borderview和Lineview只是分发处理手势事件而已
-
自定义相机 详情可以看我的博客:
-
读取系统相册的图片 可以参考我的博客:
-
写本项目的兴趣,来源于6年前的一篇博客:
#总结
-
物理世界的事件传递:自外向内,自顶向下传递流程,至于“事件消费”只是辅助而已,重要的是传递流程
-
MarkPath 体现的 面向对象 思想
-
Borderview和Lineview的 分层思想
-
dispatchTouchEvent() 如何分发事件
用法
用法:
进入项目根目录:github.com/ShaunSheep/…
clone or download 项目到本地,
打开Android Studio—>file—>new—>import new moudle—>选中本地的app或aap2