Android自定义View实现电子签名

效果图：

1.实现思路

1. 在View中实现onTouchEvent(MotionEvent event)方法，通过此方法获得在屏幕上“写”出的路么的各个点的坐标。
2. 根据获得坐标，描绘出路径。
3. 因为名字的笔划可能是不连续的，那么那么我们可以将这些路径用List列表保存起来，这就可以借此做逐笔撤回的功能。
4. 这些路径我们从按下，再到移动，最后手指离开屏幕，记录为一条路径，并且我们再保存它的画笔Paint（这意味着画笔是可以不一样的，我们这里不做介绍）。
5. 同时，我们为了兼顾实时显示我们写的轨迹和显示之前写下的轨迹。我们将写过的轨迹都保存在一个Bitmap中。

2.实现过程

2.1.监听实时坐标

 @Override public boolean onTouchEvent(MotionEvent event) { // 获得当前点的坐标(x,y) float x = event.getX(); float y = event.getY(); switch (event.getAction()) { // 点击屏幕时触发 case MotionEvent.ACTION_DOWN: // 每次点击时，就重新绘制一个新的路径Path mPath = new Path(); // 每一次记录的路径对象是不一样的 drawPath = new DrawPath(); drawPath.path = mPath; drawPath.paint = mPaint; touchStart(x, y); // 更新视图 invalidate(); break; // 移动 case MotionEvent.ACTION_MOVE: touchMove(x, y); // 更新视图 invalidate(); break; // 结束 case MotionEvent.ACTION_UP: touchUp(); // 更新视图 invalidate(); break; } return true; }

  

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

通过onTouchEvent方法获得实时的坐标点。当开始按下屏幕时，即发生MotionEvent.ACTION_DOWN事件时，我们为这一次的路径创建一个Path对象，记录它的所有坐标点，并用一个DrawPath对象记录这条路径和它所使用的画笔，并调用invalidate()更新视图，实时显示轨迹。

 // 点击屏幕时触发 case MotionEvent.ACTION_DOWN: // 每次点击时，就重新绘制一个新的路径Path mPath = new Path(); // 每一次记录的路径对象是不一样的 drawPath = new DrawPath(); drawPath.path = mPath; drawPath.paint = mPaint; touchStart(x, y); // 更新视图 invalidate(); break;

  

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

touchStart()方法记录第一个点：

// 描绘路径的起点 private void touchStart(float x, float y) { mPath.moveTo(x, y); // 记录当前坐标 mX = x; mY = y; }

  

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7

当开始写，即移动，发生MotionEvent.ACTION_MOVE，记录所有坐标点，并调用invalidate()更新视图，实时显示轨迹。

// 移动 case MotionEvent.ACTION_MOVE: touchMove(x, y); // 更新视图 invalidate(); break;

  

 

• 1
• 2
• 3
• 4
• 5
• 6

从(x1,y1)到(x2,y2)画一条贝塞尔曲线，更平滑(直接用mPath.lineTo也是可以的)

// 描绘移动产生的路径 private void touchMove(float x, float y) { float dx = Math.abs(x - mX); float dy = Math.abs(mY - y); // 横坐标或纵坐标移动的距离的绝对值大于或等于TOUCH_TOLERANCE时，才描绘路径 if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) { // 从x1,y1到x2,y2画一条贝塞尔曲线，更平滑(直接用mPath.lineTo也是可以的) mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2); // 记录当前坐标 mX = x; mY = y; } }

  

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

当结束时，我们将这条路径保存到Bitmap中。并调用invalidate()更新视图，实时显示轨迹。

 // 结束 case MotionEvent.ACTION_UP: touchUp(); // 更新视图 invalidate();

  

 

• 1
• 2
• 3
• 4
• 5

通过mCanvas.drawPath(mPath, mPaint)将路径保存到Bitmap。DrawPath对象保存到List中，以备其他功能之需，如撤销操作。

 // 路径结束时 private void touchUp() { // 路径最后一点 mPath.lineTo(mX, mY); // 用mPaint在画布上绘制路径 mCanvas.drawPath(mPath, mPaint); //将一条完整的路径保存下来(相当于入栈操作) savePath.add(drawPath); mPath = null;// 重新置空 }

  

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

2.2.兼顾实时显示我们写的轨迹和显示之前写下的轨迹

 @Override public void onDraw(Canvas canvas) { canvas.drawColor(0xFFAAAAAA); // 将前面已经画过得显示出来 canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint); if (mPath != null) { // 实时的显示 canvas.drawPath(mPath, mPaint); } }

  

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

3.完整代码

package com.wong.sign;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.os.Environment;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.ColorInt;
import androidx.annotation.Nullable;

import java.util.ArrayList;
import java.util.List;

/**
 * 手写板
 */
public class HandwritingBoardView extends View { private Paint mPaint;// 用于描绘路径的画笔 private Canvas mCanvas; private Bitmap mBitmap;// 保存每一次绘制出来的图形 private Path mPath;// 每一次画出来的路径 private float mX, mY;// 记录当前点的坐标 private static final float TOUCH_TOLERANCE = 4;// 触点之间的公差，此变量用于控制，当路径在绘制过程中，移动距离至少等于4才绘制，减轻频繁的绘制的情况。 private DrawPath drawPath;// 记录Path路径的对象 private static List<DrawPath> savePath;// 保存Path路径的集合,用List集合来模拟栈 private int screenWidth, screenHeight;// 手写板的长宽 private Paint mBitmapPaint;// 画布的画笔 private int mPenSize = 10;// 画笔宽度 px private int mPenColor = Color.BLACK;// 画笔默认颜色 private int mPanelColor = Color.TRANSPARENT;// 背景色（指最终签名结果文件的背景颜色，默认为透明色） public HandwritingBoardView(Context context) { super(context); init(); } public HandwritingBoardView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(); } public HandwritingBoardView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { mBitmapPaint = new Paint(Paint.DITHER_FLAG); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeJoin(Paint.Join.ROUND);// 设置外边缘 mPaint.setStrokeCap(Paint.Cap.ROUND);// 形状 mPaint.setStrokeWidth(mPenSize);// 画笔宽度 mPaint.setColor(mPenColor); savePath = new ArrayList<DrawPath>(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); screenWidth = getWidth(); screenHeight = getHeight(); /*创建跟view一样大的bitmap，用来保存签名(在控件大小发生改变时调用。)*/ mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); mCanvas = new Canvas(mBitmap);// 保存每一次绘制出来的图形 mCanvas.drawColor(mPanelColor); } @Override public void onDraw(Canvas canvas) { canvas.drawColor(mPanelColor); canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);// 将前面已经画过得显示出来 if (mPath != null) { canvas.drawPath(mPath, mPaint);// 实时的显示 } } /** * 描绘路径的起点 * * @param x * @param y */ private void touchStart(float x, float y) { mPath.moveTo(x, y); mX = x;// 记录当前x坐标 mY = y;// 记录当前y坐标 } /** * 描绘移动产生的路径 * * @param x * @param y */ private void touchMove(float x, float y) { float dx = Math.abs(x - mX); float dy = Math.abs(mY - y); if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {// 横坐标或纵坐标移动的距离的绝对值大于或等于TOUCH_TOLERANCE时，才描绘路径 mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);// 从x1,y1到x2,y2画一条贝塞尔曲线，更平滑(直接用mPath.lineTo也是可以的) mX = x;// 记录当前x坐标 mY = y;// 记录当前y坐标 } } /** * 路径结束时 */ private void touchUp() { mPath.lineTo(mX, mY);// 路径最后一点 mCanvas.drawPath(mPath, mPaint);// 用mPaint在画布上绘制路径,将路径保存在Bitmap上 savePath.add(drawPath);// 将一条完整的路径保存下来 mPath = null;// 重新置空 } /** * 撤销的核心思想就是将画布清空， * 将保存下来的Path路径最后一个移除掉， * 重新将路径画在画布上面。 */ public void undo() { mBitmap = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888); /* * 清空画布，但是如果图片有背景的话，则使用上面的重新初始化的方法，用该方法会将背景清空掉 */ mCanvas.setBitmap(mBitmap);// 重新设置画布，相当于清空画布 if (savePath != null && savePath.size() > 0) { savePath.remove(savePath.size() - 1);// 移除最后一个path for (HandwritingBoardView.DrawPath DrawPath : savePath) { mCanvas.drawPath(DrawPath.path, DrawPath.paint); } invalidate();// 刷新 } } /** * 重写，相当重新来过 */ public void redo() { savePath.clear(); mCanvas.drawColor(mPanelColor, PorterDuff.Mode.CLEAR); invalidate(); } public Bitmap getBitmap() { if(savePath == null || savePath.size() == 0){ return null; } return mBitmap; } @Override public boolean onTouchEvent(MotionEvent event) { // 获得当前点的坐标(x,y) float x = event.getX(); float y = event.getY(); switch (event.getAction()) { // 点击屏幕时触发 case MotionEvent.ACTION_DOWN: // 每次点击时，就重新绘制一个新的路径Path mPath = new Path(); // 每一次记录的路径对象是不一样的 drawPath = new DrawPath(); drawPath.path = mPath; drawPath.paint = mPaint; touchStart(x, y); // 更新视图 invalidate(); break; // 移动 case MotionEvent.ACTION_MOVE: touchMove(x, y); // 更新视图 invalidate(); break; // 结束 case MotionEvent.ACTION_UP: touchUp(); // 更新视图 invalidate(); break; } return true; } /** * 设置笔头大小 * * @param size */ public void setPenSize(int size) { mPenSize = size > 0 ? size : 10; this.mPenSize = size; if(mPaint != null){ mPaint.setStrokeWidth(mPenSize); } } /** * 设置面板的背景色 * * @param bgColor */ public void setPanelColor(@ColorInt int bgColor) { this.mPanelColor = bgColor; } /** * 设置画笔颜色 * * @param mPenColor */ public void setPenColor(int mPenColor) { this.mPenColor = mPenColor; if(mPaint != null) { mPaint.setColor(mPenColor); } } private static class DrawPath { public Path path;// 路径 public Paint paint;// 画笔 }
}

  

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138
• 139
• 140
• 141
• 142
• 143
• 144
• 145
• 146
• 147
• 148
• 149
• 150
• 151
• 152
• 153
• 154
• 155
• 156
• 157
• 158
• 159
• 160
• 161
• 162
• 163
• 164
• 165
• 166
• 167
• 168
• 169
• 170
• 171
• 172
• 173
• 174
• 175
• 176
• 177
• 178
• 179
• 180
• 181
• 182
• 183
• 184
• 185
• 186
• 187
• 188
• 189
• 190
• 191
• 192
• 193
• 194
• 195
• 196
• 197
• 198
• 199
• 200
• 201
• 202
• 203
• 204
• 205
• 206
• 207
• 208
• 209
• 210
• 211
• 212
• 213
• 214
• 215
• 216
• 217
• 218
• 219
• 220
• 221
• 222
• 223
• 224
• 225
• 226
• 227
• 228
• 229
• 230
• 231
• 232
• 233
• 234
• 235
• 236
• 237
• 238

欢迎下载demo写习。
Demo
Kotlin版Demo

文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_40763897/article/details/108552323