Android：实现一个自定义有限制区域的图例（角度自识别）涂鸦工具类（上）开启掘金成长之旅！这是我参与「掘金日新计划

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情

要想实现自定义View就必须先了解清楚其流程和方式，其中大概率会涉及到事件分发，所以我们简单回忆并梳理下流程。

自定义View分为继承自View和ViewGroup，继承ViewGroup相比继承View

在事件分发上ViewGroup多dispatchTouchEvent（事件分发）和onInterceptTouchEvent（事件拦截）两个方法
在继承上ViewGroup需要着重处理onmeasure（测量）与onLayout（控制位置等），而继承View重点在于onDrow(绘制)上

这篇我们就简单实现一个自定义签名类，通过手指触摸屏幕移动，显示手指滑过的路径。首先创建SignatureView并继承自View:

class SignatureView constructor(context: Context?, attrs: AttributeSet? = null) :
    View(context, attrs, 0) {
    
    private lateinit var paint: Paint
    private var mWidth = 0 //父类宽度
    private var mHeight = 0//父类高度
    
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        mWidth = MeasureSpec.getSize(widthMeasureSpec)
        mHeight = MeasureSpec.getSize(heightMeasureSpec)
        paint = Paint()
        //设置抗锯齿
        paint.isAntiAlias = true
        //设置签名笔画样式
        paint.style = Paint.Style.STROKE
        setMeasuredDimension(mWidth, mHeight)
   }
   
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        ......
    }
}

接下来需要做的其实就只有触摸事件处理和绘制路径两个任务了。绘制需要在onDraw中通过咱们初始化的画笔paint和canvas完成，那么触摸事件则需要重写onTouchEvent方法监听：

override fun onTouchEvent(event: MotionEvent): Boolean {
    super.onTouchEvent(event)
}

这里需要注意,由于签名是实时记录的，所以我们需要记录下滑动的点，将其连接成一条线，再通过pain画线。画的过程是按下移动的操作，所以在ACTION_MOVE的过程我们需要实时画线。画笔完成是抬起的动作，所以在ACTION_UP时我们需要将之前的所有点绘制在画布上。这里通过一个点的集合收集手指移动的点，用户画笔绘制。

//收集用户绘制的点
private var allPoints: MutableList<Point> = ArrayList()

val p = Point(event.x.toInt(), event.y.toInt())
when (event.action) {
    MotionEvent.ACTION_DOWN -> {
        //用户按下，表示重新开始保存点
        allPoints.clear()
        allPoints.add(p)
    }
    MotionEvent.ACTION_UP -> {
        postInvalidate() //重绘图像
    }
    MotionEvent.ACTION_MOVE -> {
        allPoints.add(p)
        postInvalidate() //子线程可刷新
    }
}

接下来就是在onDrow()中绘制，通过canvas.drawLine:

val first = allPoints[0] //第一个点
val last = allPoints[allPoints.size-1] //最后一个点
canvas.drawLine(first.x.toFloat(),first.y.toFloat(),last.x.toFloat(),last.y.toFloat(),paint)

到这里基本就结束了，但我们还需要撤回和清除的功能。这时候就需要想一想了，如果按照按下—>移动—>抬起为一笔，那么撤回的话就需要将这个过程的所有点都清除。此时我们就可以将这个过程想象成一条线，在按下时记录线的开始，抬起记录线的结束，再将这条线存放在一个集合中，如果需要撤回就将这条数据删除。

//用于画完图后的显示，在抬起时，添加来自于allPoints的所有点的数据
private var allList: MutableList<List<Point>> = ArrayList()
//用于划线过程中的显示，当集合allList存储后，清空本集合中所有数据
private var allPoints: MutableList<Point> = ArrayList()

override fun onTouchEvent(event: MotionEvent): Boolean {
    super.onTouchEvent(event)
    val p = Point(event.x.toInt(), event.y.toInt())
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            //用户按下，表示重新开始保存点
            allPoints = ArrayList()
            allPoints.add(p)
        }
        MotionEvent.ACTION_UP -> {
            //用户松开
            allList.add(allPoints)
            allPoints = ArrayList() //添加集合后，清除子集合
            postInvalidate() //重绘图像
        }
        MotionEvent.ACTION_MOVE -> {
            allPoints.add(p)
            postInvalidate() //子线程可刷新
        }
    }
    return true
}

//上一步（清除本次绘画）
fun clearLatestData() {
    if (allList.size > 0) {
        allList.removeAt(allList.size - 1)
        paints.removeAt(paints.size - 1)
    }
    postInvalidate()
}

清除就更简单了，直接清空集合中的所有线条即可，但一定不要忘记刷新视图：

//重置（清除所有绘画）
fun clearAllData() {
    allList.clear()
    postInvalidate()
}

总结

其实整套下来说难也不难，主要涉及的就是继承自View方式的自定义View。由易而难，先实现最基础的功能，通过触摸事件的不同动作采集我们需要的数据，再配合onDrow方法绘制出采集的线条，一定不要忘记刷新视图。撤回或者说多颜色，多样式的线条其实都是可以通过容器收集线条，针对不同的线条设置画笔（paint）属性达到需求的。这篇就讲到这里希望对大家有所帮助，下篇咱们讲讲异形区域限制画笔区域问题。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情