在上一篇文章中,我们介绍了如何解析pdf文件,并显示在手机页面上。接下来我们将介绍一下,如何实现一个手写画板,主要用到的类有画布类canvas和画笔了paint。先看看效果:
画板界面 设置画笔界面
一、画板的实现原理:
我们通过类canvas类实现画板,通过paint类来实现画笔,笔和布都有了,我们就可以来写东西了。
我们首先是通过自定义一个view控件,即新建一个类HandWritingView去继承View,在里面将画布和画笔创建好,最后在布局文件中创建控件即可。
第一步:新建一个类HandWriting,并继承View
- public class HandWritingView extends View
首先说说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;
- }
- /**
- * 功能:完成对画笔路径的操作,为了保证画笔效果的光滑性,采用贝尔曲线法
- */
- @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();
- }
- <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中的调用就和系统控件的调用一样了。
这样就可以在上面自由的书写了,而且很流畅、很平滑。由于今天的代码比较简单,就不上传资源了,明天我们会继续介绍有关手写画板的另一个比较复杂些的功能-画笔风格设置。欢迎大家继续关注,有什么不足之处,请指正,欢迎一起讨论……