安卓带步骤的手写签名（附源码）

已于 2022-10-11 14:43:40 修改
阅读量1.3k 收藏 3
点赞数 1
分类专栏： 安卓 # 自定义View实战 文章标签： android 安卓 canvas
于 2021-06-02 16:47:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfq88/article/details/117474050
版权

之前写的一个带笔画记录功能的安卓画板，最近才有时间写个博客好好介绍一下，参考了一些博客，最后使用了 kotlin 实现的，虽然用起来很爽，可是过了一段时间再看自己都有点懵，还好当时留下的注释非常多，有助于理解，下面是 github 源码，欢迎 star 和收藏！

https://github.com/silencefly96/drawdemo

效果图

在这里插入图片描述

实现思路

这里是一个带笔画记录功能的画板，我思考了一下大概需要有前进、后退、清除及导出功能，还是先写了一个接口，感觉有助于编写功能：

interface IDrawableView {
    fun back()
    fun forward()
    fun clear()
    fun bitmap() : Bitmap

    @Throws(IOException::class)
    fun output(path: String)
}

其中 bitmap 方法是获得自定义视图的 bitmap，output 会向指定文件名导出 png 图片，都算导出吧。

初始化

   private fun init(context: Context) {

        mContext = context
        //设置抗锯齿
        mPaint.isAntiAlias = true
        //设置签名笔画样式
        mPaint.style = Paint.Style.STROKE
        //设置笔画宽度
        mPaint.strokeWidth = mPaintWidth
        //设置签名颜色
        mPaint.color = mPaintColor
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        //创建画板bitmap
        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        //画板
        mCanvas = Canvas(mBitmap)
        //背景
        mCanvas.drawColor(mBackgroundColor)
    }

这里 init 函数在构造函数里设置画笔信息，onSizeChanged 方法里会创建默认颜色的画布。

手指事件

override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                mStartX = event.x
                mStartY = event.y
                //画笔落笔起点
                mCurrentPath.moveTo(mStartX, mStartY)
            }

            MotionEvent.ACTION_MOVE -> {
                val previousX = mStartX
                val previousY = mStartY
                val dx = abs(event.x - previousX)
                val dy = abs(event.y - previousY)
                // 两点之间的距离大于等于3时，生成贝塞尔绘制曲线
                if (dx >= 3 || dy >= 3) {
                    // 设置贝塞尔曲线的操作点为起点和终点的一半
                    val cX = (event.x + previousX) / 2
                    val cY = (event.y + previousY) / 2
                    // 二阶贝塞尔，实现平滑曲线；previousX, previousY为操作点，cX, cY为终点
                    mCurrentPath.quadTo(previousX, previousY, cX, cY)
                    // 第二次执行时，第一次结束调用的坐标值将作为第二次调用的初始坐标值
                    mStartX = event.x
                    mStartY = event.y
                }
            }

            MotionEvent.ACTION_UP -> {
                //对当前笔画后的路径出栈
                var tmp = index + 1
                while (tmp < pathList.size) {
                    pathList.removeAt(tmp)
                    tmp++
                }

                //添加到历史笔画
                pathList.add(Path(mCurrentPath))
                index++

                //将路径画到bitmap中，即一次笔画完成才去更新bitmap，而手势轨迹是实时显示在画板上的。
                mCanvas.drawPath(mCurrentPath, mPaint)
                mCurrentPath.reset()
            }
        }

        // 更新绘制
        invalidate()
        return true
    }

这里有三种事件，按下、移动和松开，按下的时候会记录当前路径的起始点，并将当前路径移到起始位置。

移动的时候大致就是将各个点连起来喽，不过这里判断了下距离再做贝塞尔函数连接，特别注意下这里将上一个点作为控制点，而将本次点与上一点的中点作为终点，这个地方是笔画能够流畅的原因，这样做会使笔画具有一定预测方向的能力。

结束的时候会记录本次的路径并绘制出来，添加到记录的数组里面，这里如果是在按下回退之后的路径，还需要先将后退的路径记录清除掉再添加本次路径，最后别忘了重置 mCurrentPath，重置前需要将本次完整的路径画出。

更新路径

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //画此次笔画之前的笔画
        canvas.drawBitmap(mBitmap, 0f, 0f, mPaint)
        //更新move过程中的笔画
        mCanvas.drawPath(mCurrentPath, mPaint)
    }

更新的时候实际是在上一次的 bitmap 的基础上，绘制本次路径，两者叠加就是全部图形。

前进后退

    //路径
    private val mCurrentPath: Path = Path()

    //历史路径
    private val pathList = LinkedList<Path>()

    //当前操作位置
    private var index = -1

先熟悉下我们前进后退需要用到的几个全局变量，然后先将后退，再说前进。

后退
    public override fun back() {
        if (index < 0) {
            Toast.makeText(mContext, "当前无旧操作可回退！", Toast.LENGTH_SHORT).show()
            return
        }

        //清空画布
        mCanvas.drawColor(mBackgroundColor, PorterDuff.Mode.CLEAR)
        mCanvas.drawColor(mBackgroundColor)

        //逐步添加路径，并绘制
        index--
        var tmp = 0
        while (tmp <= index) {
            mCanvas.drawPath(pathList[tmp], mPaint)
            tmp++
        }

        invalidate()
    }

这里就是根据当前位置的 index，清空画布后，再重绘到 index 前一个路径记录，同时 index 减一。这里性能可能很差劲，但是能用，如果读者有什么好办法可以在评论中指出！

前进
    public override fun forward() {
        if (index >= pathList.size - 1) {
            Toast.makeText(mContext, "当前无旧操作可前进！", Toast.LENGTH_SHORT).show()
            return
        }

        //只需要画下一笔
        mCanvas.drawPath(pathList[++index], mPaint)

        invalidate()
    }

前进比起后退更简单了，如果有下一笔，画出来就可以了。

清除画布

    public override fun clear() {
        //更新画板信息
        mCanvas.drawColor(mBackgroundColor, PorterDuff.Mode.CLEAR)
        mCanvas.drawColor(mBackgroundColor)
        mPaint.color = mPaintColor
        pathList.clear()
        index = -1
        invalidate()
    }

这里使用了 PorterDuff.Mode.CLEAR 来清除后，还需要使用默认颜色再绘制一遍，很鸡肋，这里还要重置一下各个变量。

导出图片

    @Throws(IOException::class)
    override fun output(path: String) {
        //配置是否去除边缘
        val bitmap = when(isClearBlank) {
            true -> clearBlank(mBitmap)
            false -> mBitmap
        }

        val bos = ByteArrayOutputStream()
        bitmap.compress(Bitmap.CompressFormat.PNG, 100, bos)
        val buffer: ByteArray = bos.toByteArray()
        val file = File(path)
        if (file.exists()) {
            file.delete()
        }
        val outputStream: OutputStream = FileOutputStream(file)
        outputStream.write(buffer)
        outputStream.close()
    }

这里就一个导出功能，用到了 bitmap 压缩成 PNG 的方法，不是很难。这里还有一个去除白边的功能，是看得别人的，想想可能用到，还是留了下来，优化了一下，可能不太好理解。

    private fun clearBlank(bitmap: Bitmap): Bitmap {

        //扫描各边距不等于背景颜色的第一个点
        val top = getDifferentFromArray(0, bitmap.width, bitmap,
            0 until bitmap.height)

        var bottom = getDifferentFromArray(0, bitmap.width, bitmap,
            bitmap.height - 1 downTo 0)

        val left = getDifferentFromArray(1, bitmap.height, bitmap,
            0 until bitmap.width)

        var right = getDifferentFromArray(1, bitmap.height, bitmap,
            bitmap.width - 1 downTo 0)

        //防止创建null的bitmap  引发的崩溃
        if (left == 0 && top == 0 && right == 0 && bottom == 0) {
            right = 375
            bottom = 375
        }

        return Bitmap.createBitmap(bitmap, left, top, right - left, bottom - top)
    }

主要就是获得四个方向第一次有数据的点的位置，在创建 bitmap，这样出来的图像就等于完美压缩了一般。下面这个方法是对 bitmap 的处理，这里为了能够把四个地方共用，传了一个 array 参数描述处理的方向：

    private fun getDifferentFromArray(type: Int, length: Int, bitmap: Bitmap, array: IntProgression): Int {
        val pixels = IntArray(length)
        for (i in array) {
            when(type) {
                //https://blog.csdn.net/tanmx219/article/details/81328315
                0 -> bitmap.getPixels(pixels, 0, length, 0, i, length, 1)  //获得一行
                1 -> bitmap.getPixels(pixels, 0, 1, i, 0, 1, length)  //获得一列
                else -> {}
            }

            for (j in pixels) {
                if (j != mBackgroundColor) {
                    return i
                }
            }
        }
        return 0
    }

关于 bitmap 处理的一些知识可以看这篇博客，很有帮助

https://blog.csdn.net/tanmx219/article/details/81328315

完整代码

虽然给出了 GitHub 链接还是贴一下完整代码吧，毕竟 GitHub 也就拿这个用了一下。

import android.annotation.SuppressLint
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import android.widget.Toast
import java.io.*
import java.util.*
import kotlin.math.abs

interface IDrawableView {
    fun back()
    fun forward()
    fun clear()
    fun bitmap() : Bitmap

    @Throws(IOException::class)
    fun output(path: String)
}

@Suppress("RedundantVisibilityModifier")
class DrawableView : View, IDrawableView {

    private lateinit var mContext: Context

    //画笔宽度 px；
    public var mPaintWidth = 10f
        set(value) {
            field = value
            mPaint.strokeWidth = value
        }

    //画笔颜色
    public var mPaintColor: Int = Color.BLACK
        set(value) {
            field = value
            mPaint.color = value
        }

    //背景色
    public var mBackgroundColor: Int = Color.TRANSPARENT
        set(value) {
            field = value
            mCanvas.drawColor(value, PorterDuff.Mode.CLEAR)
            mCanvas.drawColor(value)
            var tmp = 0
            while (tmp <= index) {
                mCanvas.drawPath(pathList[tmp], mPaint)
                tmp++
            }
            invalidate()
        }

    //是否清除边缘空白
    public var isClearBlank: Boolean = false

    //手写画笔
    private val mPaint: Paint = Paint()

    //起点X
    private var mStartX = 0f

    //起点Y
    private var mStartY = 0f

    //路径
    private val mCurrentPath: Path = Path()

    //历史路径
    private val pathList = LinkedList<Path>()

    //当前操作位置
    private var index = -1

    //画布
    private lateinit var mCanvas: Canvas

    //生成的图片
    private lateinit var mBitmap: Bitmap

    constructor(context: Context) : super(context) {
        init(context)
    }

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        init(context)
    }

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        init(context)
    }

    private fun init(context: Context) {

        mContext = context
        //设置抗锯齿
        mPaint.isAntiAlias = true
        //设置签名笔画样式
        mPaint.style = Paint.Style.STROKE
        //设置笔画宽度
        mPaint.strokeWidth = mPaintWidth
        //设置签名颜色
        mPaint.color = mPaintColor
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        //创建画板bitmap
        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        //画板
        mCanvas = Canvas(mBitmap)
        //背景
        mCanvas.drawColor(mBackgroundColor)
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //画此次笔画之前的笔画
        canvas.drawBitmap(mBitmap, 0f, 0f, mPaint)
        //更新move过程中的笔画
        mCanvas.drawPath(mCurrentPath, mPaint)
    }

    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                mStartX = event.x
                mStartY = event.y
                //画笔落笔起点
                mCurrentPath.moveTo(mStartX, mStartY)
            }

            MotionEvent.ACTION_MOVE -> {
                val previousX = mStartX
                val previousY = mStartY
                val dx = abs(event.x - previousX)
                val dy = abs(event.y - previousY)
                // 两点之间的距离大于等于3时，生成贝塞尔绘制曲线
                if (dx >= 3 || dy >= 3) {
                    // 设置贝塞尔曲线的操作点为起点和终点的一半
                    val cX = (event.x + previousX) / 2
                    val cY = (event.y + previousY) / 2
                    // 二阶贝塞尔，实现平滑曲线；previousX, previousY为操作点，cX, cY为终点
                    mCurrentPath.quadTo(previousX, previousY, cX, cY)
                    // 第二次执行时，第一次结束调用的坐标值将作为第二次调用的初始坐标值
                    mStartX = event.x
                    mStartY = event.y
                }
            }

            MotionEvent.ACTION_UP -> {
                //对当前笔画后的路径出栈
                var tmp = index + 1
                while (tmp < pathList.size) {
                    pathList.removeAt(tmp)
                    tmp++
                }

                //添加到历史笔画
                pathList.add(Path(mCurrentPath))
                index++

                //将路径画到bitmap中，即一次笔画完成才去更新bitmap，而手势轨迹是实时显示在画板上的。
                mCanvas.drawPath(mCurrentPath, mPaint)
                mCurrentPath.reset()
            }
        }

        // 更新绘制
        invalidate()
        return true
    }

    public override fun back() {
        if (index < 0) {
            Toast.makeText(mContext, "当前无旧操作可回退！", Toast.LENGTH_SHORT).show()
            return
        }

        //清空画布
        mCanvas.drawColor(mBackgroundColor, PorterDuff.Mode.CLEAR)
        mCanvas.drawColor(mBackgroundColor)

        //逐步添加路径，并绘制
        index--
        var tmp = 0
        while (tmp <= index) {
            mCanvas.drawPath(pathList[tmp], mPaint)
            tmp++
        }

        invalidate()
    }

    public override fun forward() {
        if (index >= pathList.size - 1) {
            Toast.makeText(mContext, "当前无旧操作可回退！", Toast.LENGTH_SHORT).show()
            return
        }

        //只需要画下一笔
        mCanvas.drawPath(pathList[++index], mPaint)

        invalidate()
    }

    /**
     * 清除画板
     */
    public override fun clear() {
        //更新画板信息
        mCanvas.drawColor(mBackgroundColor, PorterDuff.Mode.CLEAR)
        mCanvas.drawColor(mBackgroundColor)
        mPaint.color = mPaintColor
        pathList.clear()
        index = -1
        invalidate()
    }

    /**
     * 保存画板
     *
     */
    public override fun bitmap(): Bitmap {
        return mBitmap
    }

    /**
     * 保存画板
     * @param path       保存到路径
     *
     */
    @Throws(IOException::class)
    override fun output(path: String) {
        //配置是否去除边缘
        val bitmap = when(isClearBlank) {
            true -> clearBlank(mBitmap)
            false -> mBitmap
        }

        val bos = ByteArrayOutputStream()
        bitmap.compress(Bitmap.CompressFormat.PNG, 100, bos)
        val buffer: ByteArray = bos.toByteArray()
        val file = File(path)
        if (file.exists()) {
            file.delete()
        }
        val outputStream: OutputStream = FileOutputStream(file)
        outputStream.write(buffer)
        outputStream.close()
    }

    /**
     * 逐行扫描 清楚边界空白。
     *
     * @param bitmap
     * @return
     */
    private fun clearBlank(bitmap: Bitmap): Bitmap {

        //扫描各边距不等于背景颜色的第一个点
        val top = getDifferentFromArray(0, bitmap.width, bitmap,
            0 until bitmap.height)

        var bottom = getDifferentFromArray(0, bitmap.width, bitmap,
            bitmap.height - 1 downTo 0)

        val left = getDifferentFromArray(1, bitmap.height, bitmap,
            0 until bitmap.width)

        var right = getDifferentFromArray(1, bitmap.height, bitmap,
            bitmap.width - 1 downTo 0)

        //防止创建null的bitmap  引发的崩溃
        if (left == 0 && top == 0 && right == 0 && bottom == 0) {
            right = 375
            bottom = 375
        }

        return Bitmap.createBitmap(bitmap, left, top, right - left, bottom - top)
    }

    private fun getDifferentFromArray(type: Int, length: Int, bitmap: Bitmap, array: IntProgression): Int {
        val pixels = IntArray(length)
        for (i in array) {
            when(type) {
                //https://blog.csdn.net/tanmx219/article/details/81328315
                0 -> bitmap.getPixels(pixels, 0, length, 0, i, length, 1)  //获得一行
                1 -> bitmap.getPixels(pixels, 0, 1, i, 0, 1, length)  //获得一列
                else -> {}
            }

            for (j in pixels) {
                if (j != mBackgroundColor) {
                    return i
                }
            }
        }
        return 0
    }

}

结语

其实还有设置笔画粗细、颜色之类的没说，具体看源码里面的使用，好了，性能虽然不怎么样，可是这带记录笔画功能的安卓画板可是重来没在各个博客上看到过哦！！！

end

捡一晌贪欢
关注
专栏目录
android 手写签批_Android实现手写签名
weixin_42513296的博客
12-23 342
本文实例为大家分享了Android手写签名的实现方法，产品要求用户可以在app上签协议。。所以得弄个手写签名版，参考了一些资料自己写了个PaintView去继承View，实现签名功能。package com.****.*****.widget;import android.content.Context;import android.graphics.Bitmap;import android.g...
android手写签名
09-18
android手写签名demo，实现了android手写签名的功能，eclipse开发工具直接导入即可，里面的部分代码参考了网上其他资源的
Android屏幕手写签名的实现-详细篇
Xia_燚的博客
03-07 1万+
老规矩先看一下效果图 【实现思路】
Android手写签名与图片保存实战指南
最新发布
weixin_36001279的博客
10-07 1684
本文还有配套的精品资源，点击获取 简介：本文详细介绍了如何在Android平台上实现手写签名功能并保存为图片。包括创建手写签名组件、绘制签名到Bitmap、保存图片到本地和服务器、图片压缩技巧、性能优化和错误处理方法。所有这些步骤是完成一个电子合同或在线订单应用中手写签名功能的关键。 1. 手写签名组件创建 在移动应用开发中，手写签名功能为用户提供了便捷的交...
Android应用开发实践-在自己的App中实现手写签名功能
bahamutj的博客
10-22 2149
因为信息化的需要，我所在公司的同事希望开发一款手机app用于到基层检查时对发现的违规现象进行现场处罚，代替纸质的罚单。软件的开发需求中有一项是要求检查单位和受检单位在手机上进行手写电子签名。正好我购买的欧阳燊先生编著的《Android App开发进阶与项目实战》一书中有关于实现手写电子签名的内容，正好借鉴。教材提供了相关的源码，不过需要根据我的项目实际修改一下。这篇日志记录下修改过程备忘。
android 手写签名
weixin_42613017的博客
02-10 498
Android 手写签名是指使用手指在 Android 设备上绘制的签名。它通常用于数字签名或签署电子文件。可以通过使用手写输入 API 和触摸事件 API 来实现手写签名功能。这可以通过开发自定义视图或使用第三方库实现。 ...
Android应用源码安卓手写签名模块源码
06-10
【Android应用源码安卓手写签名模块源码】是一个针对Android平台开发的源代码项目，旨在提供一个方便的移动设备签名功能，尤其适用于商务人士和领导在出差时需要签署文件的情况。用户可以在手机屏幕上直接进行手写...
Android手写签名模块完整源码解析
资源摘要信息: "Android应用源码安卓手写签名模块源码.zip" 知识点概览: 1. Android应用开发基础 2. Android源码管理与打包 3. 手写签名模块在Android中的实现机制 4. Android源码解析与定制 详细知识点: 1. ...
android电子签名，屏幕上手写签名，
11-01
在Android平台上实现电子签名功能，主要是利用屏幕触控技术，让用户能够在屏幕上手写签名，然后将这个签名保存为图像文件，常用于移动设备上的合同签署、表单确认等场景。电子签名不仅方便快捷，还具有一定的法律...
安卓手写签名
04-14
android手写签名，一定要记得加写文件的权限
在线手写汉字识别源码 Zinnia
09-24
3. 数字签名验证：在电子文档签署中，识别并验证个人的手写签名。 4. 文档扫描：自动识别纸质文档上的手写笔记，实现数字化存储和检索。 六、源码解析与二次开发 Zinnia的开源特性使得开发者可以深入研究其内部...
Android 手写签名 Demo
qq944639839的博客
12-22 736
android 手写签名 demo
Android手写签名
lc_wanshi的博客
08-04 967
Android端手写签名，保存图片
Android手写签字源码
10-19
Android手写签字源码，提取至github开源项目Brushs，适配android4.3以上版本。含有三种笔锋效果：白板笔、喷绘笔等，适合需要用户手写保存笔迹图片的项目。
Android中手写签名的实现
热门推荐
wen_haha的博客
06-06 1万+
前言本来这篇文章应该很早就发出来了，因为最近一直在忙项目，直到现在才发出来。本篇文章就是介绍如何在手机上进行签名。设计思路在画板上进行签名（其实就是绘制图片），裁剪图片，然后保存到本地相册。效果图代码1.自己参考资料写了一个SignatureView继承View，实现签名public class SignatureView extends View { // View state pr...
安卓手写签名模块源码
09-28
为您提供安卓手写签名模块源码下载， 安卓手写签名模块源码是一款关于安卓手写签名的解决方案源码，现在的领导出差如果需要签名的话在手机上就可以直接完成了。会在签名完成以后自动形成缩略图。 效果图：
Tinker源码解析
dbs1215的专栏
08-03 1541
tinker源码解析
【android开发】手写签名系统的设计与实现（完整版）
12-18
随着移动设备的普及，人们越来越依赖移动设备，它带给人们许多的方便。其中手写签名，在一些金融行业使用较为普遍，目前手写签名系统有几款很不错，免费使用的不多。具体请参照博客：http://blog.csdn.net/acrambler
安卓 手写签名 电子签名 手写签名实现
11-03
安卓手写签名，电子签名。安卓手写签名可以显示手写签名动画
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值