Android实现画板功能（一）

本文实例为大家分享了Android实现画板功能的具体代码，供大家参考，具体内容如下

前言

最近看到了一些Android手写相关的功能，比如说：

钉钉手写签名功能，输入法手写功能，笔记类App的手写记录功能等。最近在工作中也遇到了类似的需求，其实实现画板功能并不复杂，所以我就打算在这里简单记录一下。实现画板功能比较常用的方法有两种，一是自定义view的方式在canvas上画轨迹，另一个是在imageview上画bitmap。今天就讲一下第一种方式吧。

效果图

界面布局

<RelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"
    xmlns:tools=\"http://schemas.android.com/tools\"
    android:layout_width=\"match_parent\"
    android:layout_height=\"match_parent\"
    tools:context=\".MainActivity\">

    <RelativeLayout
        android:layout_width=\"match_parent\"
        android:layout_height=\"55dp\"
        android:background=\"@color/colorPrimary\">

        <TextView
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:text=\"我的画板\"
            android:layout_marginStart=\"10dp\"
            android:layout_centerVertical=\"true\"
            android:textColor=\"@android:color/white\"
            android:textSize=\"16sp\"/>


        <TextView
            android:id=\"@+id/text_clear\"
            android:layout_width=\"wrap_content\"
            android:layout_height=\"wrap_content\"
            android:text=\"清除\"
            android:layout_alignParentEnd=\"true\"
            android:layout_marginEnd=\"10dp\"
            android:layout_centerVertical=\"true\"
            android:textColor=\"@android:color/white\"
            android:textSize=\"16sp\"/>

    </RelativeLayout>

    <com.example.drawline.LineView
        android:id=\"@+id/lineView\"
        android:layout_marginTop=\"55dp\"
        android:layout_width=\"match_parent\"
        android:layout_height=\"match_parent\">

    </com.example.drawline.LineView>

</RelativeLayout>

代码是用kotlin写的，但是实现方法和java是一样的。新建一个自定义view类，继承自View。kotlin不需要写View的三个重载方法。只需把三个参数传给父类即可。

然后是初始化Paint,Path,设置画笔颜色等。

关键代码是在onTouchEvent里面，这里需要获取到手指的位置。在移动手指时调用Path的lineTo(x,y)方法记录一下轨迹，然后调用invalidate()方法实时更新画面即可，invalidate()方法会调用onDraw方法，onDraw方法里面调用Canvas的drawPath方法就可以画出手指划过的轨迹了。

清除轨迹要调用reset()方法，调用invalidate()方法。

自定义view类

package com.example.drawline

import android.annotation.SuppressLint
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View


class LineView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val defaultPath: Path
    private val defaultPaint: Paint

    init {
        defaultPath = Path()
        defaultPaint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.DITHER_FLAG)
        defaultPaint.style = Paint.Style.STROKE
        defaultPaint.strokeWidth = 5f
        defaultPaint.color = Color.RED
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
          canvas.drawPath(defaultPath, defaultPaint)
    }

    @SuppressLint(\"ClickableViewAccessibility\")
    override fun onTouchEvent(event: MotionEvent): Boolean {

        val x = event.x
        val y = event.y

        when (event.action) {
            MotionEvent.ACTION_DOWN -> defaultPath.moveTo(x, y)
            MotionEvent.ACTION_MOVE -> defaultPath.lineTo(x, y)
            MotionEvent.ACTION_UP -> defaultPath.lineTo(x, y)
        }
        invalidate()
        return true
    }

    fun clear(){
        defaultPath.reset()
        invalidate()
    }

}

MainActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        text_clear.setOnClickListener { lineView.clear() }
    }
}

本篇文章中介绍了自定义view的一些基础知识，适合刚学习自定义view的同学们。后面几篇文章中将会继续深入讲解Android自定义view相关知识。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编程网。