前言
对于自定义 view 其实在项目里用的也是很多,但大多数都是照搬照抄,cv操作,最终导致在cv的道路上无法自拔,直到面试官问你的时候,你才悔恨当初,
这篇文章主要通过自定义view 来实现一个电子签名的功能,其核心就是通过触摸监听事件对绘画路径的捕捉,然后确定到背景画布上最终保存为一张图片的过程
一、自定义 view 的绘制流程是什么?
一般自定义view 需要实现 onMeasure (测量) onLayout (布局) onDraw (绘制)三个方法,其中onMeasure作用是测量自定义view的宽高,onLayout 的作用是对子View进行位置摆放而onDraw 则是view的最终绘制,在 onDraw 过程当中要涉及到Canvas 画布(不管是文字,图形,图片都要通过画布绘制而成),Paint 画笔(可设置颜色,粗细,大小,阴影等等,一般配合画布使用),Path 绘制路径(用于形成一些不规则图形)等。最终通过画布绘制多点形成的图形
二、监听触摸事件中对于 View 操作流程是什么?
对于自定义画笔,你需要监听其触摸事件以确定绘制的路径,一般需要实现 onTouchEvent 方法,其中 ACTION_DOWN 为手势的开始,ACTION_MOVE 为手势的过程,ACTION_UP 为手势的结束 。在手势开始的时候你需要移动画笔即绘制路径的 moveTo 操作,moveTo 不会进行绘制,只用于移动移动画笔。然后在手势过程中对画笔路径进行 quadTo 操作绘制圆滑曲线,即贝塞尔曲线 二次贝塞尔,实现平滑曲线;previousX, previousY为操作点,cX, cY为终点,最后在手势结束的时候绘制保存路径。
这里多说一下在自定义view的时候经常用到 moveTo、lineTo、 quadTo、cubicTo、arcTo 等方法 ,moveTo 不会进行绘制,只用于移动移动画笔。lineTo 用于进行直线绘制。quadTo 用于绘制圆滑曲线,即贝塞尔曲线。cubicTo 同样是用来实现贝塞尔曲线的。cubicTo 和 quadTo 有什么不一样呢?说白了,就是多了一个控制点而已。arcTo 用于绘制弧线(实际是截取圆或椭圆的一部分)。
正文
引入 Glide 图片加载依赖
implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
创建一个 GestureSignatureView 类并继承 View
public class GestureSignatureView extends View {
private static final String TAG = "GestureSignatureView";
private Path mPath;//绘制路径
private Paint mPaint;// 绘制画笔
private Canvas mCanvas;//背景画布
private Bitmap mMBitmap;//背景bitmap
private boolean isTouchedSignature = false;//是否签名 默认为false
public GestureSignatureView(Context context) {
this(context, null);
}
public GestureSignatureView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public GestureSignatureView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
Log.d(TAG, "onMeasure: 测量的宽高:" + getMeasuredWidth() + "-----------" + getMeasuredHeight());
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
mMBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mMBitmap);
mCanvas.drawColor(Color.TRANSPARENT);
mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
}
private void initPaint() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.BLACK);
mPaint.setStrokeWidth(10.0f);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setDither(true);
mPath = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
canvas.drawBitmap(mMBitmap, 0, 0, mPaint);
// 通过画布绘制多点形成的图形
canvas.drawPath(mPath, mPaint);
}
private float[] downPoint = new float[2];
private float[] previousPoint = new float[2];
/**
* 监听触摸事件的回调
*
* @param event
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
//获取距离自身(点击位置)左边界的距离
downPoint[0] = event.getX();
//获取距离自身(点击位置)上边界的距离
downPoint[1] = event.getY();
switch (event.getAction()) {
//手势开始
case MotionEvent.ACTION_DOWN:
previousPoint[0] = downPoint[0];
previousPoint[1] = downPoint[1];
// moveTo 不会进行绘制,只用于移动移动画笔。
mPath.moveTo(downPoint[0], downPoint[1]);
break;
//手势过程
case MotionEvent.ACTION_MOVE:
float dX = Math.abs(downPoint[0] - previousPoint[0]);
float dY = Math.abs(downPoint[1] - previousPoint[1]);
// 两点之间的距离大于等于3时,生成贝塞尔绘制曲线
if (dX >= 3 || dY >= 3) {
// 设置贝塞尔曲线的操作点为起点和终点的一半
float cX = (downPoint[0] + previousPoint[0]) / 2;
float cY = (downPoint[1] + previousPoint[1]) / 2;
//quadTo 用于绘制圆滑曲线,即贝塞尔曲线 二次贝塞尔,实现平滑曲线;previousX, previousY为操作点,cX, cY为终点
mPath.quadTo(previousPoint[0], previousPoint[1], cX, cY);
// 第二次执行时,第一次结束调用的坐标值将作为第二次调用的初始坐标值
previousPoint[0] = downPoint[0];
previousPoint[1] = downPoint[1];
}
break;
//手势结束
case MotionEvent.ACTION_UP:
//设置签名成功状态
isTouchedSignature = true;
mCanvas.drawPath(mPath, mPaint);
mPath.reset();
break;
}
invalidate();
return true;
}
// 缩放
public static Bitmap resizeImage(Bitmap bitmap, int width, int height) {
int originWidth = bitmap.getWidth();
int originHeight = bitmap.getHeight();
float scaleWidth = ((float) width) / originWidth;
float scaleHeight = ((float) height) / originHeight;
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
Bitmap resizedBitmap = Bitmap.createBitmap(bitmap, 0, 0, originWidth,
originHeight, matrix, true);
return resizedBitmap;
}
public Bitmap getPaintBitmap() {
return resizeImage(mMBitmap, 320, 480);
}
public void clear() {
if (mCanvas != null) {
isTouchedSignature = false;
mPath.reset();
mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
invalidate();
}
}
/**
* 保存画板
*
* @param path 保存到路径
*/
public void save(String path) {
try {
save(path, true, 50);
} catch (Exception e) {
e.printStackTrace();
}
}
public Bitmap getBitmap() {
return mMBitmap;
}
/**
* 保存画板
*
* @param path 保存到路径
* @param clearBlank 是否清除空白区域
* @param blank 边缘空白区域
*/
public void save(String path, boolean clearBlank, int blank) throws IOException {
Bitmap bitmap = mMBitmap;
if (clearBlank) {
bitmap = clearBlank(mMBitmap, blank);
}
Bitmap littleBmp = ConstantsUtil.smallImage(bitmap, 700);
Bitmap newBitmap = Bitmap.createBitmap(littleBmp.getWidth(), littleBmp.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(newBitmap);
canvas.drawColor(Color.WHITE);
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
canvas.drawBitmap(littleBmp, 0, 0, null);
ByteArrayOutputStream bos = new ByteArrayOutputStream();
newBitmap.compress(Bitmap.CompressFormat.JPEG, 50, bos);
byte[] buffer = bos.toByteArray();
if (buffer != null) {
File file = new File(path);
OutputStream outputStream = new FileOutputStream(file);
outputStream.write(buffer);
outputStream.close();
scanMediaFile(file);
}
}
/**
* 是否有签名
*
* @return
*/
public boolean getTouched() {
return isTouchedSignature;
}
/**
* 逐行扫描 清除边界空白。
*
* @param bp
* @param blank 边距留多少个像素
* @return
*/
private Bitmap clearBlank(Bitmap bp, int blank) {
int HEIGHT = bp.getHeight();
int WIDTH = bp.getWidth();
int top = 0, left = 0, right = 0, bottom = 0;
int[] pixs = new int[WIDTH];
boolean isStop;
for (int y = 0; y < HEIGHT; y++) {
bp.getPixels(pixs, 0, WIDTH, 0, y, WIDTH, 1);
isStop = false;
for (int pix : pixs) {
if (pix != Color.TRANSPARENT) {
top = y;
isStop = true;
break;
}
}
if (isStop) {
break;
}
}
for (int y = HEIGHT - 1; y >= 0; y--) {
bp.getPixels(pixs, 0, WIDTH, 0, y, WIDTH, 1);
isStop = false;
for (int pix : pixs) {
if (pix != Color.TRANSPARENT) {
bottom = y;
isStop = true;
break;
}
}
if (isStop) {
break;
}
}
pixs = new int[HEIGHT];
for (int x = 0; x < WIDTH; x++) {
bp.getPixels(pixs, 0, 1, x, 0, 1, HEIGHT);
isStop = false;
for (int pix : pixs) {
if (pix != Color.TRANSPARENT) {
left = x;
isStop = true;
break;
}
}
if (isStop) {
break;
}
}
for (int x = WIDTH - 1; x > 0; x--) {
bp.getPixels(pixs, 0, 1, x, 0, 1, HEIGHT);
isStop = false;
for (int pix : pixs) {
if (pix != Color.TRANSPARENT) {
right = x;
isStop = true;
break;
}
}
if (isStop) {
break;
}
}
if (blank < 0) {
blank = 0;
}
left = left - blank > 0 ? left - blank : 0;
top = top - blank > 0 ? top - blank : 0;
right = right + blank > WIDTH - 1 ? WIDTH - 1 : right + blank;
bottom = bottom + blank > HEIGHT - 1 ? HEIGHT - 1 : bottom + blank;
return Bitmap.createBitmap(bp, left, top, right - left, bottom - top);
}
private void scanMediaFile(File photo) {
Intent mediaScanIntent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
Uri contentUri = Uri.fromFile(photo);
mediaScanIntent.setData(contentUri);
getContext().sendBroadcast(mediaScanIntent);
}
}
然后创建一个 CommonUtil 类,用于创建文件
public class CommonUtil {
/**
* 检查是否有SDCARD
*
* @return true if exists
*/
public static boolean checkSDCard() {
try {
if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
return true;
} else {
return false;
}
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 创建文件目录,如果目录不存在
*
* @param filePath
*/
public static void createFolder(String filePath) {
File folder = new File(filePath);
if (!folder.exists()) {
try {
folder.mkdirs();
} catch (Exception e) {
e.printStackTrace();
}
}
}
public static String getDBAbsolutePath(Context context) {
String path = "";
try {
// if (Build.VERSION.SDK_INT >= 29) {
path = context.getExternalFilesDir("/sign/").getAbsolutePath();
// } else {
// path = android.os.Environment.getExternalStorageDirectory().getAbsolutePath() + "/tky/";
// }
} catch (Exception e) {
e.printStackTrace();
}
return path;
}
}
在接着创建一个 ConstantsUtil 类用于图片的保存操作
public class ConstantsUtil {
// 图片存储的地址
public static String IMG_FOLDER_PATH = FilePath.PATH_APP_STORAGE_BASE + "imgOnline/";
/**
* 各种文件路径
*/
public static class FilePath {
public static FilePath instance;
/**
* 应用的 文件根目录
*/
public static String PATH_APP_STORAGE_BASE;
public static FilePath getInstance(Context context) {
if (instance == null) {
instance = new FilePath();
if (CommonUtil.checkSDCard()) {
PATH_APP_STORAGE_BASE = CommonUtil.getDBAbsolutePath(context) + "/signOnline/";
} else {
String path = "/mnt/sdcard2/";
File file = new File(path);
if (!file.exists()) {
path = "/mnt/sdcard/";
}
PATH_APP_STORAGE_BASE = path + "/signOnline/";
}
CommonUtil.createFolder(ConstantsUtil.FilePath.PATH_APP_STORAGE_BASE);
}
return instance;
}
}
//缩小图片
public static Bitmap smallImage(Bitmap bitmapOrg, int newWidth) {
//获取这个图片的宽和高
int width = bitmapOrg.getWidth();
int height = bitmapOrg.getHeight();
//定义预转换成的图片的宽度和高度
// int newHeight = 960;
//计算缩放率,新尺寸除原始尺寸
float scaleWidth = ((float) newWidth) / width;
// float scaleHeight = ((float) newHeight) / height;
// 创建操作图片用的matrix对象
Matrix matrix = new Matrix();
// 缩放图片动作
matrix.postScale(scaleWidth, scaleWidth);
// 创建新的图片
return Bitmap.createBitmap(bitmapOrg, 0, 0,
width, height, matrix, true);
}
}
接着绘制主页面xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="@+id/signSave_tv_cancel"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_weight="1"
android:background="#CDCDCD"
android:clickable="true"
android:gravity="center"
android:onClick="onClick"
android:text="退出"
android:textColor="@color/white"
android:textSize="16sp"
android:typeface="serif" />
<TextView
android:id="@+id/signSave_tv_clear"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="#acacac"
android:clickable="true"
android:gravity="center"
android:onClick="onClick"
android:text="清除"
android:textColor="@color/white"
android:textSize="16sp"
android:typeface="serif" />
<TextView
android:id="@+id/signSave_tv_save"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="#1d9eec"
android:clickable="true"
android:gravity="center"
android:onClick="onClick"
android:text="保存"
android:textColor="@color/white"
android:textSize="16sp"
android:typeface="serif" />
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:src="#DEDFE2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<com.example.mytext.GestureSignatureView
android:id="@+id/signSave_gsv_signature"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white" />
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:src="#DEDFE2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:text="申请人:"
android:textSize="20sp"
android:typeface="serif">
</TextView>
<ImageView
android:id="@+id/singImg"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginLeft="20dp">
</ImageView>
</LinearLayout>
</LinearLayout>
最后就是MainActivity 整合
public class MainActivity extends AppCompatActivity {
private GestureSignatureView gSignature;
private ImageView singImg;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
try {
initView();
} catch (Exception e) {
e.printStackTrace();
}
}
public void onClick(View view) {
try {
int i = view.getId();
if (i == R.id.signSave_tv_cancel) {
finish();
} else if (i == R.id.signSave_tv_clear) {
gSignature.clear();
singImg.setImageDrawable(null);
} else if (i == R.id.signSave_tv_save) {
if (!gSignature.getTouched()) {
Toast.makeText(this, "您尚未签字", Toast.LENGTH_SHORT).show();
return;
}
File file = new File(ConstantsUtil.IMG_FOLDER_PATH);
file.mkdirs();
String fillPath = ConstantsUtil.IMG_FOLDER_PATH + "signImg" + System.currentTimeMillis() + ".jpg";
Log.i("w--", fillPath);
gSignature.save(fillPath);
Glide.with(this)
.load(fillPath)
.into(singImg);
Toast.makeText(this, "签字成功", Toast.LENGTH_SHORT).show();
}
} catch (Exception e) {
e.printStackTrace();
}
}
private void initView() {
gSignature = findViewById(R.id.signSave_gsv_signature);
singImg = findViewById(R.id.singImg);
ConstantsUtil.FilePath.getInstance(this);
}
}
总结
对于自定义View还有很长的路要走,记录一点一滴,成长一分一秒
如果对你有所帮助的话,不妨 Star 或 Fork,青山不改,绿水长流 ~
源码地址:EleSignaDemo