Android 自定义View-实现手写板

来源：互联网发布：jquery获取form数据编辑：程序博客网时间：2024/05/19 02:29

项目中用到类似签名板跟随手势完成签名最后获得签名的bitmap 上传到服务器上。

使用到的技术主要就是 Path类以及Paint绘画的一些方法

首先

1，在我们的View中初始化 Path以及Paint 。 Path 就像它的字面意思：路径它可以帮我们绘画一条我们想要出现的路径线，

private void initPathOrPaint() {paint = new Paint();path = new Path();//这个Paint是作为我们的背景bitmap的mBitmapPaint = new Paint();mBitmapPaint.setColor(getResources().getColor(R.color.white));//设置用于我们绘画的Paint颜色为黑色paint.setColor(getResources().getColor(R.color.black));//设置抗锯齿paint.setAntiAlias(true);// 设置类型为画笔paint.setStyle(Paint.Style.STROKE);//设置画笔变为圆滑状paint.setStrokeJoin(Paint.Join.ROUND);paint.setStrokeCap(Paint.Cap.ROUND);paint.setStrokeWidth(4);}

2.重载onDraw()，onMeasure()方法，在onMeasure（）中初始化我们作为背景的bitmap 在onDraw（）进行我们背景和画的线

@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawBitmap(bitmap, 0, 0, mBitmapPaint);canvas.drawPath(path, paint);

<span style="white-space:pre"></span>mCanvas.drawPath(path, paint);}// 计算view及其ziview的长宽@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// TODO Auto-generated method stubsuper.onMeasure(widthMeasureSpec, heightMeasureSpec);//我们的画板的背景 可以设置为我们自定义View的大小bitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(),Bitmap.Config.RGB_565);

<span style="white-space:pre"></span>//记录我们的bipmap<span style="white-space:pre"></span>mCanvas = new Canvas(bitmap);}

3.重载我们的onTouchEvent()方法，来进行我们最重要的操作，跟随手势来绘制签名。

// 触摸事件@Overridepublic boolean onTouchEvent(MotionEvent event) {float x = event.getX();float y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:canvasStart(x, y);break;case MotionEvent.ACTION_MOVE:cavasMove(x, y);break;case MotionEvent.ACTION_UP:cavasEnd();break;default:break;}invalidate();return true;}private void canvasStart(float x, float y) {//将path的起点移动到x,y的坐标处path.moveTo(x, y);//这个记录上一次的坐标点startX = x;startY = y;}private void cavasMove(float x2, float y2) {float dx = Math.abs(x2 - startX);float dy = Math.abs(y2 - startY);if (dx >= MOVE_WIDTH || dy >= MOVE_WIDTH) {float endx = (x2 + startX) / 2;float endy = (y2 + startY) / 2;//画出一条二次贝塞尔曲线，。。。我的理解就是 画出一条平滑的曲线（贝塞尔曲线就是这样的一条曲线，它是依据四个位置任意的点坐标绘制出的一条光滑曲线。baidu）path.quadTo(startX, startY, endx, endy);startX = x2;startY = y2;}}private void cavasEnd() {path.lineTo(startX, startY);}

由上面的onTouchEvent()看以看出每一次我们手势移动的都会重新绘制我们的View，从而实现我们的手势画到我们的画布上。

4.最后在我们的VIew里提供getBitmap的方法来获得我们的bitmap

public Bitmap getBitmap(){return bitmap;}

0 0