Android学习笔记：自定义View之手写签名

其实，手写签名，和画图有异曲同工之妙。

目录

一、绘制笔迹

二、清除笔迹

三、保存笔迹

四、完善清除功能

---

那我们直接点，以画图作为说明参考。

一、绘制笔迹

首先，我们需要什么？画布？然后，画笔？不，我们需要先新建一个继承于View类的子类

我们先把它取名为  SignView.java  

 

同时，你发现这玩意报红，提示什么呢

它提示说：View 里面，没有一个可用的默认构造函数，行，那我们给它实现便是了

按流程走到这里

我兴高采烈的选择了第一个，因为看上去参数少点嘛，ok，代码如下

package com.kabun.myapplication;

import android.content.Context;
import android.view.View;

public class SignView extends View {
    public SignView(Context context) {
        super(context);
    }
}

同时，将它丢进布局里面，

点击运行，哦豁，崩了，看下日志

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.kabun.myapplication/com.kabun.myapplication.MainActivity}: android.view.InflateException: Binary XML file line #8: Error inflating class com.kabun.myapplication.SignView
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2325)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2387)
        at android.app.ActivityThread.access$800(ActivityThread.java:151)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1303)
        at android.os.Handler.dispatchMessage(Handler.java:102)
        at android.os.Looper.loop(Looper.java:135)
        at android.app.ActivityThread.main(ActivityThread.java:5254)
        at java.lang.reflect.Method.invoke(Native Method)
        at java.lang.reflect.Method.invoke(Method.java:372)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:905)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:700)
     Caused by: android.view.InflateException: Binary XML file line #8: Error inflating class com.kabun.myapplication.SignView
        at android.view.LayoutInflater.createView(LayoutInflater.java:616)
        at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:743)
        at android.view.LayoutInflater.rInflate(LayoutInflater.java:806)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:504)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:414)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:365)
        at androidx.appcompat.app.AppCompatDelegateImpl.setContentView(AppCompatDelegateImpl.java:696)
        at androidx.appcompat.app.AppCompatActivity.setContentView(AppCompatActivity.java:170)
        at com.kabun.myapplication.MainActivity.onCreate(MainActivity.java:22)
        at android.app.Activity.performCreate(Activity.java:5990)
        at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1106)
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2278)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2387) 
        at android.app.ActivityThread.access$800(ActivityThread.java:151) 
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1303) 
        at android.os.Handler.dispatchMessage(Handler.java:102) 
        at android.os.Looper.loop(Looper.java:135) 
        at android.app.ActivityThread.main(ActivityThread.java:5254) 
        at java.lang.reflect.Method.invoke(Native Method) 
        at java.lang.reflect.Method.invoke(Method.java:372) 
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:905) 
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:700) 
     Caused by: java.lang.NoSuchMethodException:  [class android.content.Context, interface android.util.AttributeSet]
        at java.lang.Class.getConstructor(Class.java:531)
        at java.lang.Class.getConstructor(Class.java:495)
        at android.view.LayoutInflater.createView(LayoutInflater.java:580)
        at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:743) 
        at android.view.LayoutInflater.rInflate(LayoutInflater.java:806) 
        at android.view.LayoutInflater.inflate(LayoutInflater.java:504) 
        at android.view.LayoutInflater.inflate(LayoutInflater.java:414) 
        at android.view.LayoutInflater.inflate(LayoutInflater.java:365) 
        at androidx.appcompat.app.AppCompatDelegateImpl.setContentView(AppCompatDelegateImpl.java:696) 
        at androidx.appcompat.app.AppCompatActivity.setContentView(AppCompatActivity.java:170) 
        at com.kabun.myapplication.MainActivity.onCreate(MainActivity.java:22) 
        at android.app.Activity.performCreate(Activity.java:5990) 
        at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1106) 
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2278) 
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2387) 
        at android.app.ActivityThread.access$800(ActivityThread.java:151) 
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1303) 
        at android.os.Handler.dispatchMessage(Handler.java:102) 
        at android.os.Looper.loop(Looper.java:135) 
        at android.app.ActivityThread.main(ActivityThread.java:5254) 
        at java.lang.reflect.Method.invoke(Native Method) 
        at java.lang.reflect.Method.invoke(Method.java:372) 
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:905) 
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:700) 

里面有两个导致的原因，我们直接看最后一个Caused by，说：

java.lang.NoSuchMethodException:  [class android.content.Context, interface android.util.AttributeSet]

这个什么意思呢？可以通过源码跳转进去看下这个异常的定义

package java.lang;

/**
 * Thrown when a particular method cannot be found.
 *
 * @author     unascribed
 * @since      JDK1.0
 */
public
class NoSuchMethodException extends ReflectiveOperationException {
    private static final long serialVersionUID = 5034388446362600923L;

    /**
     * Constructs a NoSuchMethodException without a detail message.
     */
    public NoSuchMethodException() {
        super();
    }

    /**
     * Constructs a NoSuchMethodException with a detail message.
     *
     * @param      s   the detail message.
     */
    public NoSuchMethodException(String s) {
        super(s);
    }
}

看类注释，说的是，当找不到一个特定的方法时，就会抛出来，额，好难...

所以是哪个方法？？？看样子，像是初始化时，找不到有两个参数的方法，莫非是一开始的这个，

试试

package com.kabun.myapplication;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

public class SignView extends View {

    public SignView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
}

nice！跑起来了！

现在，开始入正题，如果我们要在屏幕上画画的话，那么，按道理来说，手指在屏幕上滑动的时候，紧接着，是不是该有一条紧随着您手指滑动的轨迹呢？那么，换句话说，我们是不是只要在你滑动的一连串位置上，画上一连串的笔迹点就好了？

那么，问题来了，你如何获取你手指在屏幕上滑动的具体位置呢？可以通过View类提供的这个方法  onTouchEvent   ，这个方法提供了什么呢？你触摸屏幕时的坐标位置。我们只要重写这个方法即可，然后，系统就会在你触摸屏幕时不断地回调这个方法，我们就可以从方法返回的参数  MotionEvent  手势事件中，通过 MotionEvent 中的  getX()  或者 getY() 方法拿到对应的x坐标和y坐标，嘿嘿，是不是很简单？补一下原始代码

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

然后，我们定制一下，然后变成了下面酱紫

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                Log.e(TAG,"ACTION_DOWN getX = "+event.getX()+" getY = "+event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                Log.e(TAG,"ACTION_MOVE getX = "+event.getX()+" getY = "+event.getY());
                break;
            case MotionEvent.ACTION_UP:
                Log.e(TAG,"ACTION_UP getX = "+event.getX()+" getY = "+event.getY());
                break;
        }
     return true;
    }

我先解释下代码，在上面代码中，我将手势事件 event 划分了三种（为啥是三种？因为首先它定义的事件不止三种，我只是抽取其中我想用到的三种）进行相应的处理，分别是：

            1、手指触碰到屏幕时  ：就是当 event.getAction()  等于 MotionEvent.ACTION_DOWN  时

     2、手指在屏幕上滑动时：就是当event.getAction()  等于 MotionEvent.ACTION_MOVE 时

     3、手指离开屏幕时：就是当event.getAction()  等于 MotionEvent.ACTION_UP 时

至于打印日志中的那些  event.getX()  和   event.getY()  ，因为手势事件里面有挺多信息的，而当前我们只需要里面的坐标信息就够了，也即是  getX()  和  getY() 分别对应 x 坐标和 y 坐标

顺便说下这个方法的返回值，为什么要 return true ？因为默认它可不是返回true的，而是

return super.onTouchEvent(event);

简单理解就是， super.onTouchEvent(event)  的值是  false ，不行你可以打印一下。它之前返回值是由父类super逻辑决定的，我现在直接把它写死，一直返回 true  。意味着这个 MotionEvent 手势事件 ，来到这里的时候，直接交由这个方法块里的代码进行处理，不再往下传递，return true  或者  return false 其实就是问你，是不是由你自己自行处理这个事件。如果你返回false 的话，你打印日志会发现，除了打印了  MotionEvent.ACTION_DOWN 这个事件，其他事件就没打印了，由于这里涉及事件分发的原理，所以，相关的知识不在此进行展开细说。

按需要，我们就返回 true ，顺便打印一下日志看看

01-07 16:16:34.967 4690-4690/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_DOWN getX = 394.81873 getY = 825.44446
01-07 16:16:35.024 4690-4690/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 392.34274 getY = 861.3992
01-07 16:16:35.041 4690-4690/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 399.88123 getY = 898.23474
01-07 16:16:35.057 4690-4690/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 402.525 getY = 926.572
01-07 16:16:35.074 4690-4690/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 402.525 getY = 945.5775
01-07 16:16:35.090 4690-4690/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 402.525 getY = 961.7938
01-07 16:16:35.106 4690-4690/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 405.995 getY = 975.4282
01-07 16:16:35.106 4690-4690/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_UP getX = 405.995 getY = 975.4282

看到没，x ，y 坐标都现世了！！

接下来要干嘛？按国标来走的话，应该是在上述一系列的xy点位置上，对应地绘制出一系列的点，那么，当这些点连起来的时候，轨迹就出来了。

那么，问题又来了，谁去使用这些坐标点呢？或者说，这些坐标点传给谁去处理呢？传给一个 叫 Path 的实例，没错，翻译过来意思就是路径，挺实在一娃，你想想，这么多个坐标点，最理想的情况当然是有那么一个东西或者工具，帮你把它们连起来显示在屏幕上啦，对不对？很好，Path 能帮你做到这些，它能很好地帮你把这些点连起来，但是，Path 从哪里来的呢？new 出来的

private Path mPath =new Path();

不过要注意，导入正确的包，导入的是    android.graphics.Path

好了，怎么使用它呢？俗话说，两点连成一条线，也就是说，应该是要有序地从某个a点连到某个b点，Path 里面有个方法叫  lineTo

 

    /**
     * Add a line from the last point to the specified point (x,y).
     * If no moveTo() call has been made for this contour, the first point is
     * automatically set to (0,0).
     *
     * @param x The x-coordinate of the end of a line
     * @param y The y-coordinate of the end of a line
     */
    public void lineTo(float x, float y) {
        isSimplePath = false;
        nLineTo(mNativePath, x, y);
    }

这个方法注释大概意思就是：从上次的点，到这次指定的点xy之间，添加一条线。但注意的是，如果在此之前，moveTo 这个方法没被调用过的话，那么第一个点会被自动设认为（0,0）也就是左上角

换句话说，首先，你也看到这个方法需要传两个参数  x 和 y，这两个参数可以定位到一个点，这个 lineTo 方法可以拉一条线接到这个点（x，y）上，但是问题呢，就是从哪里也就是从哪个起点连到当前的这个指定的点（x，y）上呢？那么，按道理来说，在使用 lineTo 之前，应该是有相应的那么一个方法是去设置起点的，如果不设置的话，就会将第一个点设为（0，0），行，那就（0，0）吧

那就试试嘛~

我们直接将手指在屏幕上滑动时：也就是上述提到的当event.getAction()  等于 MotionEvent.ACTION_MOVE 时，处理一下获得的坐标点，就是把这个点（x，y）传给  path 实例的 lineTo 方法，如下

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                Log.e(TAG, "ACTION_DOWN getX = " + event.getX() + " getY = " + event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX(),event.getY());
                Log.e(TAG, "ACTION_MOVE getX = " + event.getX() + " getY = " + event.getY());
                break;
            case MotionEvent.ACTION_UP:
                Log.e(TAG, "ACTION_UP getX = " + event.getX() + " getY = " + event.getY());
                break;
        }
        return true;
    }

这样就可以了吗？跑跑试试？

怎么样？啥也没有对不对？先听我狡辩，path通过 lineTo 方法收集完你的滑动信息后，这个path，理应交给某个类进行处理的，但是，你看到这个路径path有交给谁了么？并没有。所以，我们应该想一下，这个路径path应该给谁？谁可以处理这一大条路径。答案是画布 Canvas     为什么是Canvas 呢？因为你想画东西的话，肯定要载体吧？如果你的手指是画笔，那么，屏幕应该算是画板了吧？那你可以把Canvas 当成画板，毕竟，人家本来就叫画布，叫它做画板，也不算委屈它。那么， 画笔的大小直径粗细呢？画笔的颜色呢？莫急，一步步来

先说Canvas，用到哪学到哪，它里面提供了一个专门跟path相关的方法叫  drawPath

    /**
     * Draw the specified path using the specified paint. The path will be filled or framed based on
     * the Style in the paint.
     *
     * @param path The path to be drawn
     * @param paint The paint used to draw the path
     */
    public void drawPath(@NonNull Path path, @NonNull Paint paint) {
        super.drawPath(path, paint);
    }

方法注释的直译意思是：使用指定的绘制工具绘制指定的路径。路径将根据颜料中的样式被填充或加框。

（我其实挺郁闷的，为啥是画布可以draw这个path出来...）

什么意思呢？注释中的  the specified path  指定的路径 以及 the specified paint  指定的颜料  恰恰对应 drawPath 的两个参数 (@NonNull Path path  和   @NonNull Paint paint) ，那么，这么说的话，画笔的颜色以及样式就是由 paint 决定的。所以，我们要把paint颜料准备一下，也是new出来

private Paint mPaint=new Paint();

那么，paint 也到手了，就差画布了，那么画布 Canvas 去哪里搞回来呢？是 onDraw 方法！为啥是它呢？先看源码与注释

    /**
     * Implement this to do your drawing.
     *
     * @param canvas the canvas on which the background will be drawn
     */
    protected void onDraw(Canvas canvas) {
    }

方法注释的直译意思是：实现这个来完成你的画画（或者说绘制更合适些）

参数的直译意思是：将在其上绘制背景的画布

大概就是说，你可以通过实现这个方法，来完成你的绘制，然后，这个参数canvas就是你将要在它上面绘制东西的画布，所以这个参数canvas也即是画板。那么，其实通过名字大概也可以猜到，ondraw 就是当进行绘制的时候会被调用

我们先实现一下它，它是在View里面的，所以，你只要打个  ond..就会有代码提示了

此时，选择第一个就是了，默认实现代码如下

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

好了，龙珠已到位，可以召唤神龙了。目前，我们已经分别准备好了：

       1、存放了手势事件的笔迹的path

       2、设置颜料的paint

       3、两者的载体画板canvas

行， 直接上代码，顺便打印一下日志

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.e(TAG, "onDraw canvas = " + canvas);
        canvas.drawPath(mPath,mPaint);
    }

跑一下，看一下日志

01-09 16:49:27.631 3237-3237/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.GLES20RecordingCanvas@9be9b22

很棒，你也看到了，onDraw  在app一启动的时候，自动回调了，并且canvas不为空

然后，我们试着划几下

你会发现，没啥东西在屏幕上出来，再看下日志

2021-01-09 17:44:56.969 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@79fbf4b
2021-01-09 17:44:57.924 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_DOWN getX = 308.025 getY = 367.46667
2021-01-09 17:44:58.000 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 314.1113 getY = 373.64154
2021-01-09 17:44:58.016 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 321.01874 getY = 387.95197
2021-01-09 17:44:58.034 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 323.1 getY = 410.25366
2021-01-09 17:44:58.051 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 325.29373 getY = 446.30988
2021-01-09 17:44:58.067 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 323.1 getY = 473.53394
2021-01-09 17:44:58.084 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 321.01874 getY = 489.6927
2021-01-09 17:44:58.100 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 318.82498 getY = 504.10065
2021-01-09 17:44:58.116 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 314.49374 getY = 515.1077
2021-01-09 17:44:58.133 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 314.49374 getY = 526.23517
2021-01-09 17:44:58.152 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 314.49374 getY = 534.9575
2021-01-09 17:44:58.168 2259-2259/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 314.49374 getY = 539.5328

  onDraw 只是在app启动的时候被调用了一次，后面就没动静了....就挺尴尬的...

 

 

  所以，我们该怎样才能让 onDraw 这货动起来？ 来 ，上才艺！它就是   invalidate()  ，它也是在View里面的，直接看它的源码与注释

    /**
     * Invalidate the whole view. If the view is visible,
     * {@link #onDraw(android.graphics.Canvas)} will be called at some point in
     * the future.
     * 

     * This must be called from a UI thread. To call from a non-UI thread, call
     * {@link #postInvalidate()}.
     */
    public void invalidate() {
        invalidate(true);
    }

直译过来的意思就是 ：

   使整个视图无效。如果视图是可见的，onDraw将在将来的某个时间点被调用。这必须从UI线程调用。要从非ui线程调用，调用postInvalidate ()

这翻译大概意思呢，就是只要我们调用了这个方法，那么  onDraw() 将会被调用，是不是就意味着画布就绘制出我们期望放置的内容了？行，试试

我选择在  onTouchEvent  返回值之前，每次处理完手势事件坐标点之后，进行画布的绘制方法调用，运行效果

 

再看下日志

2021-01-09 21:58:53.450 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@79fbf4b
2021-01-09 21:58:55.034 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_DOWN getX = 329.625 getY = 291.55554
2021-01-09 21:58:55.067 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 327.4875 getY = 291.55554
2021-01-09 21:58:55.067 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@3b343d4
2021-01-09 21:58:55.085 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 323.11148 getY = 293.67773
2021-01-09 21:58:55.085 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@3b343d4
2021-01-09 21:58:55.100 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 318.82498 getY = 300.80896
2021-01-09 21:58:55.100 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@3b343d4
2021-01-09 21:58:55.117 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 316.57498 getY = 311.70837
2021-01-09 21:58:55.117 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@3b343d4
2021-01-09 21:58:55.134 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 314.49374 getY = 320.8141
2021-01-09 21:58:55.134 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@3b343d4
2021-01-09 21:58:55.149 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 314.49374 getY = 333.96008
2021-01-09 21:58:55.149 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@3b343d4
2021-01-09 21:58:55.166 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 314.49374 getY = 347.46216
2021-01-09 21:58:55.166 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@3b343d4
2021-01-09 21:58:55.183 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 314.49374 getY = 355.5075
2021-01-09 21:58:55.183 2672-2672/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@3b343d4

可以证明，onDraw() 在每次滑动之后，都被成功地调用了，同时，画布终于有痕迹了

不过，话说回来，这画迹有点诡异，但是依稀看出画出的这一坨黑色里面有那么一丝丝规律的，就是我手势去到哪，这坨黑色就在哪蹦跶。这又抛出了一个新问题了，为什么会呈现这般模样呢？既然是样子的问题，那么就追究到底，样子问题归谁管？样子问题说白了就是样式问题，谁管的样式？还记得这个绘制它出来的 drawPath 方法吗？

请看红框标示的内容，以及之前的注释描述 路径将根据颜料中的样式被填充或加框 

如此看来，这次的样式问题，颜料paint全责。 注意注释里的这句：  the Style in the paint  说不定，在paint 类里面，可以找找跟style相关的方法

你看，这是不是style

    

我们看看这个style到底是怎么回事

    /**
     * The Style specifies if the primitive being drawn is filled, stroked, or
     * both (in the same color). The default is FILL.
     */
    public enum Style {
        /**
         * Geometry and text drawn with this style will be filled, ignoring all
         * stroke-related settings in the paint.
         */
        FILL            (0),
        /**
         * Geometry and text drawn with this style will be stroked, respecting
         * the stroke-related fields on the paint.
         */
        STROKE          (1),
        /**
         * Geometry and text drawn with this style will be both filled and
         * stroked at the same time, respecting the stroke-related fields on
         * the paint. This mode can give unexpected results if the geometry
         * is oriented counter-clockwise. This restriction does not apply to
         * either FILL or STROKE.
         */
        FILL_AND_STROKE (2);

        Style(int nativeInt) {
            this.nativeInt = nativeInt;
        }
        final int nativeInt;
    }

直译过来的意思是：样式指定所绘制的原语是填充的、描边的，还是两者都是(用相同的颜色)。默认是填充

大概意思就是，指定的样式有这三种，只是默认用的是填充

如你所见，这个玩意是个枚举，里面有三个枚举常量，分别是：

1、FILL ：填充，使用此样式绘制的几何图形和文本将被填充，忽略所有与笔画相关的设置

2、STROKE：（用笔等）画，使用这种样式绘制的几何图形和文本将被描边，这与绘图上与描边相关的字段有关

3、FILL_AND_STROKE：使用这种样式绘制的几何图形和文本将同时被填充和描边，这与绘图上与描边相关的字段有关。如果几何图形是逆时针方向，这种模式会产生意想不到的结果。此限制不适用于填充或笔画

如果按照这注释的意思的话，估计只有 stroke 这个跟描边相关的样式才符合我们的需求，同时，注意下，这里 style 枚举的注释说道，默认是填充的，所以，我们可以验证下，试试看下paint默认情况下的style是个啥，补充一下代码，在构造函数里：

    public SignView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        Log.e(TAG, " mPaint.getStyle() = " +  mPaint.getStyle());
    }

  打印一下日志发现：

2021-01-10 10:51:43.111 2185-2185/com.kabun.myapplication E/com.kabun.myapplication.SignView:  mPaint.getStyle() = FILL

看到没，paint的默认样式果然是 Fill 填充，我现在不能完全肯定是这个样式导致的问题，但是，可以测试一下，在构造方法里设置一下颜料的样式：

    public SignView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mPaint.setStyle(Paint.Style.STROKE);
        Log.e(TAG, " mPaint.getStyle() = " +  mPaint.getStyle());
    }

跑一下app：
 

你看！！笔迹是不是出来了？！

再看下日志

2021-01-10 10:56:41.869 2456-2456/com.kabun.myapplication E/com.kabun.myapplication.SignView:  mPaint.getStyle() = STROKE

颜料的样式已经成功改为描边了。不过是否留意到，我开始画的地方和笔迹的起始地方对不上？

标示 1 的地方是我触摸的位置，也是期望笔迹的开始的位置，但真正的笔迹开始位置是 标示 2 的地方.......（这现象告诉我一个道理，期望与现实之间的落差，只会迟到，不会不到。）为什么呢？路径的问题可以回头找下路径解决，是否还记得我们刚对这个lineTo方法的分析：

现在试出结果了，在我们没有手动设置好起点的话，第一个点确实被初始化为 （0，0）了，然后，我们手指落下的点，自然地接到了起点  （0，0）也就是屏幕左上方的坐标点的连线痕迹，所以，破案。那么， 按照注释所说，我们只要在生成第一个点的时候，调用 moveTo 方法去设置好起点即可。那么，怎样才算是第一个点呢？换句话问就是，moveTo 这个方法要放在哪里去调用才合适？按道理说，路径的起点应该是笔迹的起点，也就是手指每次落下的那个位置，也就是对应着手势事件中的 MotionEvent 的ACTION_DOWN 类型。理论是这样的，我们实践一下：

           补了一发代码，使得每次接触事件产生的时候，设置对应的笔迹起点，跑一下

看，是不是就挺像那么一回事了~

二、清除笔迹

不过，你也发现了..这字...好像.....多了点东西

尴尬，我想清空内容重新写，怎么清空呢？将app重启？不，使不得，优雅点，换台手机吧，开个玩笑。既然内容是由画布联合路径，加上颜料的点缀，通过画布自身的方法绘制出来的，那么，解铃还须系铃人，这三位之中，应该找谁买单？

画布吗？可以看下画布自身有没有跟还原或者清空之类的相关方法，或者直接点，绘制一片跟屏幕原始颜色一样的白色，不也一样效果么，屏幕变回一片白色不就好了~但是，我要说但是了，画布是在ondraw方法里传过来的， 也就是说，每次都要刷新完绘制之后，才能拿到画布canvas这货，即使，你拿到它的引用，赋予给一个画布变量，通过画布清空了内容，但是，刷新时，该干嘛还是干嘛，如果说通过设置标志位进行判断的话，会不会有点麻烦呢哎下一个

那路径呢？目前来看，路径主要是收集坐标点信息，然后将整个自身丢给画布了，我很好奇，如果我可以删掉它里面的那一堆坐标点信息，或者说，将path还原了之后，再丢给画布，画布能不能继续蹦跶？

至于颜料，目前我只是设置了颜料的样式，然后就将颜料递给了画布大哥了，不妥，这货怼不得，无从下手

我太难了....

行吧，先尝试从路径下手，目前，我们只是使用了路径的两个方法，分别是moveTo 设置笔迹起点以及 lineTo 连接坐标点，按道理，它应该有个类似存储坐标点的地方吧，然后，在我看来，path 就是个存储坐标点的货，不然那些坐标点它拿来干嘛~，按此强盗思路，我顺腾摸瓜找到了类似的方法，什么重置判断是否为空之类的方法：

    /**
     * Clear any lines and curves from the path, making it empty.
     * This does NOT change the fill-type setting.
     */
    public void reset() 

这个方法看着就像还原：清除路径上的任何线条和曲线，使其为空。这不会改变填充类型设置。

还有这个：

  /**
     * Returns true if the path is empty (contains no lines or curves)
     *
     * @return true if the path is empty (contains no lines or curves)
     */
    public boolean isEmpty()

翻译：如果路径为空(不包含直线或曲线)则返回true

我们可以在尝试清空路径上的线之前和之后，判断下路径，同时记住要刷新绘制，添加清空逻辑：

    /**
     * 清空
     */
    public void clear() {
        Log.e(TAG, "clear()");
        if(mPath!=null){
            Log.e(TAG, "before clear mPath isEmpty => "+mPath.isEmpty());
            mPath.reset();
            Log.e(TAG, "after clear mPath isEmpty => "+mPath.isEmpty());
            invalidate();
        }
    }

看，有效的，这法子行得通，再看下日志

1-01-11 10:12:55.423 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@58e7363
2021-01-11 10:12:55.439 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 779.8769 getY = 765.6889
2021-01-11 10:12:55.440 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@58e7363
2021-01-11 10:12:55.458 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_MOVE getX = 799.4249 getY = 765.6889
2021-01-11 10:12:55.459 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@58e7363
2021-01-11 10:12:55.497 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: ACTION_UP getX = 799.4249 getY = 765.6889
2021-01-11 10:12:55.506 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@58e7363
2021-01-11 10:12:56.229 2502-2502/com.kabun.myapplication E/demo:MainActivity$1.onClick(L:29):  mSignView com.kabun.myapplication.SignView{758f819 V.ED..... ........ 0,0-1080,1680 #7f080122 app:id/signView}
2021-01-11 10:12:56.229 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: clear()
2021-01-11 10:12:56.229 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: before clear mPath isEmpty => false
2021-01-11 10:12:56.229 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: after clear mPath isEmpty => true
2021-01-11 10:12:56.239 2502-2502/com.kabun.myapplication E/com.kabun.myapplication.SignView: onDraw canvas = android.view.DisplayListCanvas@58e7363

clear被调用之前，path是有东西的，清空之后，path 就真的变空了

三、保存笔迹

来到这里了，画图你会了，清空画图你也会了，要不，保存一下这个画图？这么好看不存下浪费了是不是...那么问题来了，怎么保存呢？怎么去获取画布canvas上的内容呢？如何将 canvas 通过一堆操作之后，输出为一个图像文件呢？canvas的确提供了一些操作，其实如果在你想凭空 new 一个画布出来的时候，canvas 就有这么一个构造方法：

    /**
     * Construct a canvas with the specified bitmap to draw into. The bitmap
     * must be mutable.
     *
     * 
The initial target density of the canvas is the same as the given
     * bitmap's density.
     *
     * @param bitmap Specifies a mutable bitmap for the canvas to draw into.
     */
    public Canvas(@NonNull Bitmap bitmap)

翻译：使用指定的位图构造画布。位图必须是可变的。画布的初始目标密度与给定的位图密度相同

其实里面的意思，大概是你往这个canvas构造方法里面传一个参数bitmap进去，那么，你之后的canvas的绘制内容都会绘制到bitmap上去，就相当于用位图代替原先的画布了。这样一来，无意外的话，我们再从理论上推测的话，只要将bitmap输出到文件，不是就相当于保存图片了吗~是的，理想很丰满，但你bitmap从哪里来？新建一个？怎么新建？新建一个咋样的？首先我们得先构建一个bitmap出来，可以通过bitmap自身的方法

    /**
     * Returns a mutable bitmap with the specified width and height.  Its
     * initial density is as per {@link #getDensity}. The newly created
     * bitmap is in the {@link ColorSpace.Named#SRGB sRGB} color space.
     *
     * @param width    The width of the bitmap
     * @param height   The height of the bitmap
     * @param config   The bitmap config to create.
     * @throws IllegalArgumentException if the width or height are <= 0, or if
     *         Config is Config.HARDWARE, because hardware bitmaps are always immutable
     */
    public static Bitmap createBitmap(int width, int height, @NonNull Config config) {
        return createBitmap(width, height, config, true);
    }

这个方法是怎么一个情况呢，你会看到这个方法的需要传入三个参数，前面两个就是宽度和高度，就是你要的bitmap尺寸，第三个是config配置，这个配置是什么？直接看它的源码：

 /**
     * Possible bitmap configurations. A bitmap configuration describes
     * how pixels are stored. This affects the quality (color depth) as
     * well as the ability to display transparent/translucent colors.
     */
    public enum Config 

翻译：可能的位图的配置。位图配置描述像素的存储方式。这影响质量(颜色深度)以及显示透明/半透明颜色的能力。

所以，这个东西决定了bitmap的显示质量，注意哦，这也是个枚举哦，它需要让你自己选择要哪个配置哦，然后，你会看到一堆 ALPHA_8，RGB_565，ARGB_8888  ...  诸如此类的常量可能会懵，没关系，先统一说明，再拆开来看。

一般来说，一幅完整的图像，是由三种基本色分别是红色red, 绿色green, 蓝色blue构成三个颜色的首字母就演变成了常见的 RGB 了，后面随着科技的发展，多了一个叫透明度Alpha的东西也就是大写 A，后面人称 ARGB 四件套。

然后是后面的数字什么8888之之类的，一般来说，按照计算机的标准，一种基本颜色的深度用一个字节也就是8位即为 2的8次方来标示，大概是256个层级。假设一个红色的深浅度是用8位就是0-255来表示，那么255就是根正苗红的红，0的话就不红了，数字越大越深。现在的 8888 就是4个8那么多，其实就是对应着4件套 ，每一个8位数值分别对应一个颜色值的程度，4个8位加起来一共就是32位，人称32位图。

然后就是   RGBA_F16 ，这个又是什么鬼..其实，F 是 float的意思，就浮点数，16就是16位的意思，合起来就是16位的浮点数，人称半精度浮点数，因为float占用4字节的，现在它只用了2字节，也就是16位，所以才叫半精度。

最后一个是 HARDWARE  ，这个和RGBA_F16 都是比较新的接口，在 api26 也就是 Android 8.0 才开始支持的，这东西其实就是只将图片的数据存在显存里，不需要占用应用的堆内存，那么，一般来说应该是应用的堆内存一份数据，显存一份数据，一人一份的，那么，现在就可以是对应地减少了内存的消耗。

所以，我选择了钛合金8888的配置，不上不下不高不低。ok，这个config选好了，但是，宽和高还没处理，这个值怎么定义好呢？按套路走的话，bitmap的尺寸是不是应该和整个画布的尺寸保持一致，也就是说，你画布多大我位图就多大，对吧？所以，我们将画布的宽高传给位图就好了，但是，我们又如何得知当前画布的尺寸大小呢？退后，我要开始装x了，想一下，画布的大小是不是就是故事一开头，我们定义的这个 SignView 的view 的大小？是的，所以，我们应该怎么获取view 的宽高？view 提供了对应的方法，我就不扯淡了直接上代码：

    //位图的绘制内容输出者：真正负责绘制签名笔迹的画布
    private Canvas mCanvas;
    //用来存放签名笔迹绘制内容的位图
    private Bitmap mCacheBitmap;

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mCacheBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mCacheBitmap);
    }

如上所写，mCanvas用来控制绘制内容的，mCacheBitmap 是用来放置绘制内容的，getWidth() 和  getHeight() 都是View自带的方法，分别获取当前view自身的宽与高。有人可能会问，为什么要在 onSizeChanged 的里面是去做初始化呢，这就涉及view 的绘制流程的知识了，后面我会另外写一篇来吹吹关于绘制流程的水。说回onSizeChanged ，主要是这个方法被调用时，view 已经测量过并确定好自身的大小，所以，我们可以在这个时候拿它的宽高。注意哦，不是必须在这个时候拿，而是可以在这个时候拿。

ok，既然 bitmap 已经搞出来，那么mCanvas怎么实现绘制呢？毕竟，现在mCanvas绘制的东西会自动填充到mCacheBitmap里面去了嘛，我只要让mCanvas实现绘制就好了。在之前呢，我们是将path传给在ondraw调用时返回的画布使用，不过，那时是因为我们要使用的画布，也就是跟当时SignView相关联的画布，只能在ondraw被调用时，拿到。但现在我们不需要在当前的view绘制并显示了，所以，我们只要在path路径拿到手势事件的信息之后，就可以将路径传给mCanvas处理绘制了。意思就是看如下的代码：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(event.getX(), event.getY());
                Log.e(TAG, "ACTION_DOWN getX = " + event.getX() + " getY = " + event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX(), event.getY());
                Log.e(TAG, "ACTION_MOVE getX = " + event.getX() + " getY = " + event.getY());
                break;
            case MotionEvent.ACTION_UP:
                Log.e(TAG, "ACTION_UP getX = " + event.getX() + " getY = " + event.getY());
                break;
        }
        //真正负责绘制签名笔迹的画布，在这里接收路径mPath，以及事先定义好的颜料
        mCanvas.drawPath(mPath, mPaint);
        invalidate();
        return true;
    }

如上所写，我在每次处理完对应的手势事件之后，也就是mPath拿到对应的坐标点后，进行统一的mCanvas处理绘制，再去调用 invalidate() 时，就是轮到当前界面的画布绘制了。如此一来，保存笔迹的画布与当前signview的画布几乎是同时完成绘制内容的了，只是两者的显示内容的地方不一样罢了。那么，现在理论上来说 mCacheBitmap 上应该是有内容的了，所以，我们只要将bitmap保存到本地就好了。在界面上添加一个保存按钮，同时添加对应的保存逻辑。

现在又有新问题了？bitmap 如何输出到一个文件？ 这个文件要求是个图像文件，但是图像好像有几个格式喔，例如什么 JPG,PNG 之类的，不慌，我这边向您推荐 bitmap 自家出品的 compress 方法

    /**
     * Write a compressed version of the bitmap to the specified outputstream.
     * If this returns true, the bitmap can be reconstructed by passing a
     * corresponding inputstream to BitmapFactory.decodeStream(). Note: not
     * all Formats support all bitmap configs directly, so it is possible that
     * the returned bitmap from BitmapFactory could be in a different bitdepth,
     * and/or may have lost per-pixel alpha (e.g. JPEG only supports opaque
     * pixels).
     *
     * @param format   The format of the compressed image
     * @param quality  Hint to the compressor, 0-100. 0 meaning compress for
     *                 small size, 100 meaning compress for max quality. Some
     *                 formats, like PNG which is lossless, will ignore the
     *                 quality setting
     * @param stream   The outputstream to write the compressed data.
     * @return true if successfully compressed to the specified stream.
     */
    @WorkerThread
    public boolean compress(CompressFormat format, int quality, OutputStream stream)

一看，这货不是压缩的吗，且慢，再听我狡辩，你看这注释:

将位图的压缩版本写入指定的outputstream。如果返回true，则可以通过将相应的inputstream传递给BitmapFactory.decodeStream()来重构位图。注意:并不是所有格式都直接支持所有的位图配置，所以BitmapFactory返回的位图可能有不同的位深度，并且/或者可能丢失了每个像素的alpha值(例如JPEG只支持不透明像素)。

我们只看关键信息，它说它会将经过该方法压缩之后的压缩版位图，写入指定的输出流，然后，输出流又是我们指定的，意思是我们新建一个传参进去就好了，只要我们拿到输出流，也就相当于可以将输出流输出到指定目录下的文件了。然后是，格式CompressFormat：

    /**
     * Specifies the known formats a bitmap can be compressed into
     */
    public enum CompressFormat {
        JPEG    (0),
        PNG     (1),
        WEBP    (2);

只见它给我们提供了3款产品，那我们选择png就好了，三者的区别就不在此展开了，其他有兴趣的自行搜索。 至于  quality  质量，直接传个100就好了，就是要纯种的。然后就完事了：

    public void save() {
        //创建一个文件用于存放图片
        File file = new File(mContext.getExternalCacheDir() + "testSign.png");
        if (file.exists()) {
            file.delete();
        }
        OutputStream outputStream = null;
        try {
            //输出到这个文件
            outputStream = new FileOutputStream(file);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
            Toast.makeText(mContext, "保存异常：" + e.getMessage(), Toast.LENGTH_SHORT).show();
        }
        //压缩形成输出流
        mCacheBitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream);
        Toast.makeText(mContext, "保存成功!", Toast.LENGTH_SHORT).show();
    }

     上述的mContext  可以使用构造方法里面的context

       点击运行

              

 然后，分别去模拟器和as自带的文件浏览器看那张图片

嗯，as里面看透明的背景，模拟器里面看，直接全黑了...

额，因为这个图片背景默认是透明的，所以，它的背景取决于浏览器的背景，我们需要设置一下它的背景，首先想一下，你心目中的画布背景是怎样的？应该是白色的吧？那很好，所以，我们只要将画布的染成或者说绘制成白色就好了，我们沿着draw开头的方法看看有什么发现...这一看，还挺多

虽然挺多的，不过讲真，我倒是相中了一个，谁，它！

    /**
     * Fill the entire canvas' bitmap (restricted to the current clip) with the specified color,
     * using srcover porterduff mode.
     *
     * @param color the color to draw onto the canvas
     */
    public void drawColor(@ColorInt int color) {
        super.drawColor(color);
    }

直译过来就是：使用srcover porterduff模式，用指定的颜色填充整个画布的位图(仅限于当前剪辑)。

嗯？  srcover porterduff mode  ？这是什么鬼....

 

不慌，我尝试在该类中搜索相关的字段，然后，我在这个方法的下方不远处发现了这个

进去看了看，然后，我顺藤摸瓜的找到了一些信息

这注释的直译意思是：源像素绘制在目标像素上。

这个 srcover porterduff mode  可以参考点击跳转的链接,也可参考扔物线的  https://hencoder.com/ui-1-2/

然后，我推测，算了 ，我推测不了，这些可能是  PorterDuff  里面内置的17种混合模式，这些混合模式用于2D图像的合成，不同混合模式有不同的合成效果，我当前选择的这个 drawColor 方法呢，它使用的是 PorterDuff  模式里面的 SRC_OVER 模式。这个模式的作用可能是（因为我也是瞎推测）将 drawColor 接收到的参数值，因为这个参数是color相关的嘛，就将这些color 的像素值绘制在目标像素，然后，目标像素这哥们会不会就是当前的画布canvas啊，那我试试，说不定是呢~  那我们直接动手吧，在哪里动呢？我们现在要初始化画布的背景色，其实就是相当于先把画布绘制成白色，那可以直接在初始化 mCanvas 时，顺便绘制了就好了：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mCacheBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mCacheBitmap);
        mCanvas.drawColor(Color.WHITE);
    }

然后直接运行看结果：

好了

再试试画点东西再保存：

 

四、完善清除功能

开心！不行，这字写错了，我得重新写！：

 

哦豁，旧的笔迹怎么还在？

我的确按了清空的按钮，但是清空没有按我预期的流程走，为什么呢？我们回顾下清空的逻辑

    /**
     * 清空
     */
    public void clear() {
        Log.e(TAG, "clear()");
        if (mPath != null) {
            Log.e(TAG, "before clear mPath isEmpty => " + mPath.isEmpty());
            mPath.reset();
            Log.e(TAG, "after clear mPath isEmpty => " + mPath.isEmpty());
            invalidate();
        }
    }

路径的确是被清空了，ondraw里面的 canvas 和 mCanvas ，用的是同一个路径，为什么 canvas 没了旧的痕迹，而和 mCanvas 关联在一起的位图，内容还是原来那样呢？因为 ondraw 之后，canvas 相当于重新使用当前的路径进行内容的绘制，而路径已经被清了，所以，canvas 也就绘制不出东西了，但是位图呢，它的内容由此至终都没改过，因为它的内容靠 mCanvas 绘制进去的嘛，但是清空方法里面，有对mCanvas 进行处理吗？并没有，所以，需要处理一下mCanvas，怎么处理它呢？毕竟，mCanvas 无法控制位图的对应方法，让位图实现个清除内容或者重置之类的操作，但是，mCanvas 可以绘制内容到位图上，那我们只要绘制内容覆盖原来的位图上的内容就好了，其实，说那么多，一行代码放在清空逻辑那里就好了：

在路径清空之后，直接绘制一片白色在位图上~

 

呈上MainActivity的完整代码：

package com.kabun.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;



public class MainActivity extends AppCompatActivity {

    private SignView mSignView;
    private Button mBtnClear;
    private Button mBtnSave;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sign);
        mSignView=findViewById(R.id.signView);
        mBtnClear=findViewById(R.id.clear);
        mBtnSave=findViewById(R.id.save);
        mBtnClear.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mSignView!=null){
                    mSignView.clear();
                }

            }
        });
        mBtnSave.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mSignView!=null){
                    mSignView.save();
                }
            }
        });
    }



}

呈上 SignView 的完整代码：

package com.kabun.myapplication;

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.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

import androidx.annotation.Nullable;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.OutputStream;

public class SignView extends View {
    private String TAG = this.getClass().getName();
    private Path mPath = new Path();
    private Paint mPaint = new Paint();
    //位图的绘制内容输出者：画布
    private Canvas mCanvas;
    //用来存放绘制内容的位图
    private Bitmap mCacheBitmap;
    //上下文
    private Context mContext;

    public SignView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        mPaint.setStyle(Paint.Style.STROKE);
//        Log.e(TAG, " mPaint.getStrokeWidth() = " + mPaint.getStrokeWidth());//默认描边宽度是0，但是真正绘制时依然有一个像素的宽度
//        mPaint.setStrokeWidth(10);//设置描边宽度，也就是笔迹的粗细
        Log.e(TAG, " mPaint.getStyle() = " + mPaint.getStyle());
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mCacheBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mCacheBitmap);
        mCanvas.drawColor(Color.WHITE);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(event.getX(), event.getY());
                Log.e(TAG, "ACTION_DOWN getX = " + event.getX() + " getY = " + event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX(), event.getY());
                Log.e(TAG, "ACTION_MOVE getX = " + event.getX() + " getY = " + event.getY());
                break;
            case MotionEvent.ACTION_UP:
                Log.e(TAG, "ACTION_UP getX = " + event.getX() + " getY = " + event.getY());
                break;
        }
        //真正负责绘制签名笔迹的画布，在这里接收路径mPath，以及事先定义好的颜料
        mCanvas.drawPath(mPath, mPaint);
        invalidate();
        return true;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.e(TAG, "onDraw canvas = " + canvas);
        canvas.drawPath(mPath, mPaint);
    }

    /**
     * 清空
     */
    public void clear() {
        Log.e(TAG, "clear()");
        if (mPath != null) {
            Log.e(TAG, "before clear mPath isEmpty => " + mPath.isEmpty());
            mPath.reset();
            mCanvas.drawColor(Color.WHITE);
            Log.e(TAG, "after clear mPath isEmpty => " + mPath.isEmpty());
            invalidate();
        }
    }

    public void save() {
        //创建一个文件用于存放图片
        File file = new File(mContext.getExternalCacheDir() + "testSign.png");
        if (file.exists()) {
            file.delete();
        }
        OutputStream outputStream = null;
        try {
            //输出到这个文件
            outputStream = new FileOutputStream(file);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
            Toast.makeText(mContext, "保存异常：" + e.getMessage(), Toast.LENGTH_SHORT).show();
        }
        //压缩形成输出流
        mCacheBitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream);
        Toast.makeText(mContext, "保存成功!", Toast.LENGTH_SHORT).show();
    }

}

呈上完整的布局代码：