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

来源：互联网发布：苹果6s移动数据用不了编辑：程序博客网时间：2024/04/28 00:34

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

画板界面设置画笔界面

一、画板的实现原理：

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

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

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

[java] view plaincopy
public class HandWritingView extends View   

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

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

[java] view plaincopy
@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（）方法中获取三个动作，按下屏幕、滑动屏幕、离开屏幕。按下时，记住当前的屏幕坐标，滑动记录轨迹，离开时清空之前的轨迹。这样，我们就能保证书写的平滑和流畅了。看代码：

[java] view plaincopy
/** 
     * 功能：完成对画笔路径的操作,为了保证画笔效果的光滑性，采用贝尔曲线法 
     */  
    @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，就像实现系统控件一样，在布局文件中设置：

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

0 0