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