自定义控件-使用Canvas绘图定义一个手写板

Android

最近因项目需求，需要有一个控件，可用提供用户手写签名并保持保存为图片。
听上去是一个非常酷炫的功能，然而实现起来其实并不复杂，下面会记录一下这个控件的开发过程。

先看下效果：
签名效果图

首先需要定义一个叫做PaintView的类继承自View，并定义一个Paint用来绘制笔画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
 * Created by zhangfan on 16-6-17.
 */
public class MyView extends View {
    private Paint brush = new Paint();
    public MyView(Context context) {
        super(context);
	init();
    }
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
	init();
    }
    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
	init();
    }
    private void init(){
        brush.setAntiAlias(true);//抗锯齿
        brush.setDither(true);//防抖动
        brush.setColor(Color.BLUE);
        brush.setStyle(Paint.Style.STROKE);
        brush.setStrokeJoin(Paint.Join.ROUND);
        brush.setStrokeWidth(10f);
    }
}

这时候绘制相关的准备工作都已准备完毕，接下来就是如何绘制用户的笔迹了。
我们重写onTouchEvent来监听用户的触摸操作，定义一个Path变量来记录的用户的触摸轨迹。
并重写onDraw方法来绘制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
private Path path = new Path();
@Override
protected void onDraw(Canvas canvas) {
    canvas.drawPath(path, brush);
}
public boolean onTouchEvent(MotionEvent event) {
    float pointX = event.getX();
    float pointY = event.getY();
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            path.moveTo(pointX, pointY);
            return true;
        case MotionEvent.ACTION_MOVE:
            path.lineTo(pointX, pointY);
            break;
        default:
            return false;
    }
    // 通知重绘
    postInvalidate();
    return false;
}

到此为止我们的控件已经可用了，不过我们还需要一个方法来情况画布的内容，如下：

1
2
3
4
public void reset(){
     path.reset();
     postInvalidate();
}

完工。

文章目录
,