Android实现画板功能(一)

 更新时间:2021年09月10日 15:30:09   作者:吐尔洪江Coding  
这篇文章主要为大家详细介绍了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相关知识。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS实现点击参数面板按钮显示或隐藏数据

    JS实现点击参数面板按钮显示或隐藏数据

    本文主要介绍JS实现点击参数面板按钮显示或隐藏数据的方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 使用DrawerLayout完成滑动菜单的示例代码

    使用DrawerLayout完成滑动菜单的示例代码

    这篇文章主要介绍了使用DrawerLayout完成滑动菜单的示例代码,代码简单易懂,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 解决react-native软键盘弹出挡住输入框的问题

    解决react-native软键盘弹出挡住输入框的问题

    这篇文章主要介绍了解决react-native软键盘弹出挡住输入框的问题,本文通过实例图文相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Android基础之Fragment与Activity交互详解

    Android基础之Fragment与Activity交互详解

    以下小编就为大家介绍一下Fragment跟Activity之间的关系。需要的朋友可以过来参考下
    2013-07-07
  • Kotlin挂起函数应用介绍

    Kotlin挂起函数应用介绍

    挂起函数用状态机以挂起点将协程的运算逻辑拆分成不同的片段,每次执行协程运行不同的逻辑片段,由此可以知道协程是运行在线程中的,线程的并发处理方式也可以用在协程上
    2022-11-11
  • Android利用ContentProvider获取本地数据的方法

    Android利用ContentProvider获取本地数据的方法

    这篇文章主要介绍了Android利用ContentProvider获取本地数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Android 通过触摸动态地在屏幕上画矩形效果

    Android 通过触摸动态地在屏幕上画矩形效果

    在屏幕上用手指画出一个区域,返回所圈的区域坐标。通过自定义view设置画笔及对应参数,在onTouchEvent()回调函数里,对触摸事件进行判断。画出矩形图形,具体实现代码大家参考下本文
    2017-07-07
  • Android App中自定义View视图的实例教程

    Android App中自定义View视图的实例教程

    这篇文章主要介绍了Android App中自定义View视图的实例教程,详细讲解了如何在创建View中定义各种锁需要的样式属性,需要的朋友可以参考下
    2016-04-04
  • 基于Android代码实现常用布局

    基于Android代码实现常用布局

    大家在日常中经常见到用xml文件实现android常用布局,但是大家知道如何用代码实现呢?使用代码实现可以帮助我们学习sdk api,所以小编把我日常整理些关于android常用布局代码实现分享给大家
    2015-11-11
  • Android仿淘宝搜索联想功能的示例代码

    Android仿淘宝搜索联想功能的示例代码

    本篇文章主要介绍了Android仿淘宝搜索联想功能的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论