刚去公司,产品说要实现一个在图片上涂鸦的效果。当时感觉瞬间有种想逃离的想法,之前没写过这样的。后来想想,实现那个需求,得先实现自由画线并保存。
画板控件实现要用到自定义View,绘制路径通过Path来保存。在画线开始前,简单说一下Path类的两个方法moveTo()和lineTo():
1)moveTo()
void moveTo(float x, float y)
该方法是设置(x,y)为Path的起点。
2)lineTo()
void lineTo(float x, float y)
绘制从上一个点到下一个点的直线。
比如用以上两个方法绘制一个三角形的代码如下:
Path path = new Path();
path.moveTo(10,0);
path.lineTo(100,100);
path.lineTo(5,9);
path.close();//设置是闭合曲线
canvas.drawPath(path,paint);
每一条复杂的曲线,可以理解为是由无数条直线组成的。言归正传,继续说我们画板控件,当我们知道画出来的线用Path保存后,在onTouch中,当手指按下的时候,创建一个Path并把Path的起点移到按下位置,手指移动的时候,就通过moveTo去画直线,当手指抬起的时候,把这个Path加入一个List中保存。
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//创建Path,并设置起点
path = new Path();
path.moveTo(event.getX(),event.getY());
break;
case MotionEvent.ACTION_UP:
//保存路径
pathList.add(path);
break;
case MotionEvent.ACTION_MOVE:
//画线
path.lineTo(event.getX(),event.getY());
break;
}
invalidate();
return super.onTouchEvent(event);
}
最后在onDraw中,先绘制已经保存的Path,然后绘制当前绘制的Path。
for (int i = 0;i<pathList.size();i++){
canvas.drawPath(pathList.get(i),paint);
}
if (path != null){
canvas.drawPath(path,paint);
}
实现效果如下: