ScaleSketchPadDemo
此项目包含两个模块
- app1 为普通绘画板
- app2 为可所发的绘画板
方便各位Android 开发者理解和使用
用法:
进入项目根目录:https://github.com/ShaunSheep/ScaleSketchPadDemo
clone or download 项目到本地,
打开Android Studio—>file—>new—>import new moudle—>选中本地的app或aap2
项目简介
普通绘画板 | 可缩放平移绘画板 | |
---|---|---|
效果图 | ||
事件图 | ||
uml图 |
普通绘画板
有五大功能:
- 普通绘画
- 在图片上绘画
- 改变画笔颜色
- 改变画笔粗细
- 撤销操作
- 添加图片
绘画功能
在图片上绘画
改变画笔颜色
改变画笔粗细
添加图片
绘画板原理:
注意: Pathview 没有绘制的能力,具备绘制能力的是PointPath
这张图说明了:事件传递的过程、处理事件的方式
基本知识:
View具有onTouchEvent(Motionevent event)函数,可以接收触摸事件
图,描述用户一次触摸滑动的过程,系统产生event的情况;打印log,画图无穷小的点
一次 touch event log:
action test: finger down
action test: finger move
action test: finger move
action test: finger move
action test: finger move
action test: finger move
action test: finger move
action test: finger move
action test: finger up
实现思路
PointPath 是实际具有绘画能力的类:
- 存储点的状态(橡皮、普通点、粗细、颜色)
- 接收Canvas进行绘制
PathView 是PointPath的控制类,继承自View:
- 接收Touch事件,并处理响应的event
- 存储每一条Path
- onDraw()中调用PointPath类进行绘制
难点
- View 的 onTouchEvent()
- 每接收到一个Event,都需要break结束判断
- 存储Point的时机——>Action_Move——>记得break结束判断流程
- 存储Path的时机——>Action_Up——>记得break结束判断流程
- move和up结束前,都要invalidte
- 橡皮擦功能
- Paint.setXformode()属性,本质就是同一个位置,两个点进行集合运算
- onDraw()中需要新建临时canvas,临时Bitmap
可缩放的绘画板
app2 增加了缩放功能
双手缩放平移VS普通状态
缩放、平移原理
缩放功能设计
双手触摸屏幕缩放、平移操作,打印出的log(也就是系统反馈给开发者的触摸事件):
action test: finger down
action test: action_pointer_down
action test: action_move
action test: action_move
action test: action_move
action test: action_move
action test: action_move
action test: action_move
action test: action_up
插入图片:缩放图原理
基本知识
- view 的缩放属性,平移属性
view.setscaleX()
view.setscaleY()
view.setX()
view.setY() - viewgroup和子view的事件传递
return true 即为消耗event
难点
- 计算缩放比例、控制缩放的大小,保证图片不越界
- 画板缩放之后,手势画出的线条发生偏移,计算平移值,对坐标点进行加减运算即可
- 子view和viewgroup的事件拦截