【android开发】手写签名系统的设计与实现之实现手写画板（三）

在上一篇文章中，我们介绍了如何解析pdf文件，并显示在手机页面上。接下来我们将介绍一下，如何实现一个手写画板，主要用到的类有画布类canvas和画笔了paint。先看看效果：

               画板界面                                          设置画笔界面


           


一、画板的实现原理：

我们通过类canvas类实现画板，通过paint类来实现画笔，笔和布都有了，我们就可以来写东西了。

我们首先是通过自定义一个view控件，即新建一个类HandWritingView去继承View，在里面将画布和画笔创建好，最后在布局文件中创建控件即可。

第一步：新建一个类HandWriting,并继承View

public class HandWritingView extends View

继承View后我们要复写两个方法onDraw()和onTouchEvent(),接下来的操作就是在两个方法中实现画布和画笔。之前一个哥们说他去面试，面试官问他实现画布时，在onDraw（）和onTouchEvent（）方法中是做什么工作，今天正好在这里和大家聊聊，我们通常实现一个功能很顺手，如果问我们一些细节问题，我们可能就说不上了，难免面试官回说我们都是复黏贴代码。

首先说说onDraw（），根据名称我们就能知道，这里是实现绘画的，对的，就是实现绘画功能的，创建画布canvas和画笔paint以及设置画布和画笔的属性都是这里，当然了我们还是把监听的轨迹传递过来，画笔才能去书写。

@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.clipRect(0, 50, 720, 360);//控制画板的区域坐标(x,y,x+width,y+high);
canvas.drawColor(Color.argb(150, 120, 120, 120));//控制画板的背景颜色
canvas.drawBitmap(HandWriting(new1Bitmap), 0, 0, null);
canvas.drawPath(path, paint);
}

/**
* 功能：完成画笔的操作，并返回bitmap对象
* @param originalBitmap
* @return
*/
@SuppressLint("HandlerLeak")

public  Bitmap HandWriting(Bitmap originalBitmap) {

if (isClear) {
canvas = new Canvas(new2Bitmap);
} else {
canvas = new Canvas(originalBitmap);
}
paint = new Paint();
paint.setColor(color); //设置画笔的颜色
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(strokeWidth);//设置画笔的粗细
paint.setAntiAlias(true);//抗锯齿
paint.setDither(true);
paint.setFilterBitmap(true);
paint.setSubpixelText(true);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
if (isClear) {
return new2Bitmap;
}
return originalBitmap;
}

通过上面的代码我们就把画布和画笔实例出来了，当然了其中的path我们还没有进行配置，这样我们是不能去书写的，没有响应的轨迹，笔就不会显示出效果。轨迹的处理就要放在onTouchEvent（）方中了，对轨迹的处理有两种方法：一种是线性处理，利用lineTo；另一种是贝尔曲线，利用quadTo。对于书写字的画板，当然后者是最好的了，这样实现起来的效果会更加的平滑和流畅。在ontouchEvent（）方法中获取三个动作，按下屏幕、滑动屏幕、离开屏幕。按下时，记住当前的屏幕坐标，滑动记录轨迹，离开时清空之前的轨迹。这样，我们就能保证书写的平滑和流畅了。看代码：

/**
* 功能：完成对画笔路径的操作,为了保证画笔效果的光滑性，采用贝尔曲线法
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
startX = event.getX();
startY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touchDown(event);
return true;
case MotionEvent.ACTION_MOVE:
touchMove(event);
return true;
case MotionEvent.ACTION_UP:
touchUp(event);
return true;
default:
break;
}

return super.onTouchEvent(event);
}

/**
* 功能：手指点下屏幕时调用
* @param event
*/
private void touchDown(MotionEvent event){
clickX = startX;
clickY = startY;
//path绘制的绘制起点
path.moveTo(startX, startY);
invalidate();
}

/**
* 功能：手指在屏幕上滑动时调用
* @param event
*/
private void touchMove(MotionEvent event){
//二次贝塞尔，实现平滑曲线；clickX, clickY为操作点，(clickX+startX)/2, (clickY+startY)/2为终点
path.quadTo(clickX, clickY, (clickX+startX)/2, (clickY+startY)/2);
//第二次执行时，第一次结束调用的坐标值将作为第二次调用的初始坐标值
clickX = startX;
clickY = startY;
invalidate();
}

/**
* 功能：手指离开屏幕时调用
* @param event
*/
private void touchUp(MotionEvent event){
//鼠标弹起保存最后状态
canvas.drawPath(path, paint);
//重置绘制路线，即隐藏之前绘制的轨迹
path.reset();
}

这样画布和画笔我们都创建就好了，除了上面的两个方法，我们一般还会用到onDetachedFromWindow（），这个方法是在view退出时调用的，我们在这里可以释放一些操作。好了，自定的一个view控件就结束，接下来我们是调用这个view，就像实现系统控件一样，在布局文件中设置：

<com.xinhui.view.HandWritingView
android:id="@+id/handwriteview"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:layout_above="@+id/pageNumber"
android:layout_alignParentLeft="true" />

接下来在activity中的调用就和系统控件的调用一样了。

这样就可以在上面自由的书写了，而且很流畅、很平滑。由于今天的代码比较简单，就不上传资源了，明天我们会继续介绍有关手写画板的另一个比较复杂些的功能-画笔风格设置。欢迎大家继续关注，有什么不足之处，请指正，欢迎一起讨论……