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