Android实现画板功能(二)

更新时间：2021年09月10日 15:29:35 作者：吐尔洪江Coding

这篇文章主要为大家详细介绍了Android实现画板功能的第二篇，使用imageView，bitmap方式实现画板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Android实现画板功能的具体代码，讲解使用imageView，bitmap的方式实现画板功能，供大家参考，具体内容如下

前言

在上一篇Android实现画板功能（一）文章中我介绍过用自定义view的方式实现画板功能，在这篇文章中继续讲解使用imageView，bitmap的方式实现画板功能。也是非常简单，初始化canvas，paint，创建和imageView一样大的bitmap，当手指点击屏幕时记录下初始位置，手指移动时传递当前位置，调用canvas的draw Line方法就可以实现画图的效果了。如果想要保存画出来的图片，把bitmap保存下来即可。

效果图

既然开发出了画板，那就随便画一点吧（画图我已经尽力了）。

布局文件

<?xml version="1.0" encoding="utf-8"?>
<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/teal_200">
 
        <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"/>
 
        <TextView
            android:id="@+id/text_eraser"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="擦除"
            android:layout_toStartOf="@id/text_clear"
            android:layout_marginEnd="10dp"
            android:layout_centerVertical="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"/>
 
        <TextView
            android:id="@+id/text_blue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="蓝色"
            android:layout_toStartOf="@id/text_eraser"
            android:layout_marginEnd="10dp"
            android:layout_centerVertical="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"/>
 
        <TextView
            android:id="@+id/text_red"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="红色"
            android:layout_toStartOf="@id/text_blue"
            android:layout_marginEnd="10dp"
            android:layout_centerVertical="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"/>
 
    </RelativeLayout>
    <ImageView
        android:id="@+id/image"
        android:layout_marginTop="55dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
    </ImageView>
</RelativeLayout>

DrawLineView

import android.annotation.SuppressLint
 
import android.graphics.* 
 
import android.view.MotionEvent
 
import android.widget.ImageView
 
class DrawLineView (view: ImageView){
 
private var defaultPaint: Paint
private var canvas: Canvas
private var bitmap: Bitmap
private var imageView:ImageView
private var startX = 0f
private var startY = 0f
 
init {
    imageView = view
 
    bitmap = Bitmap.createBitmap(imageView.width, imageView.height, Bitmap.Config.ARGB_8888)
    canvas = Canvas(bitmap)
    canvas.drawColor(Color.WHITE)
 
    defaultPaint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.DITHER_FLAG)
    defaultPaint.style = Paint.Style.STROKE
    defaultPaint.strokeWidth = 5f
    defaultPaint.color = Color.RED
 
    canvas.drawBitmap(bitmap, Matrix(), defaultPaint)
    imageView.setImageBitmap(bitmap)
 
    eventHandler()
}
 
@SuppressLint("ClickableViewAccessibility")
private fun eventHandler() {
    imageView.setOnTouchListener { _, event ->
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                startX = event.x
                startY = event.y
            }
 
            MotionEvent.ACTION_MOVE -> {
                val endX = event.x
                val endY = event.y
                canvas.drawLine(startX, startY, endX, endY, defaultPaint)
                startX = event.x
                startY = event.y
                imageView.setImageBitmap(bitmap)
            }
 
            MotionEvent.ACTION_UP -> {
 
            }
        }
        true
    }
}
 
fun clear(){
    bitmap.eraseColor(Color.WHITE)
    imageView.setImageBitmap(bitmap)
}
 
fun blue(){
    defaultPaint.color = Color.BLUE
}
 
fun red(){
    defaultPaint.color = Color.RED
}
 
fun eraser(){
    defaultPaint.color = Color.WHITE
}
}

这是我自己封装的DrawLineView类，在init方法中初始化bitmap和canvas，传进来的bitmap的宽高就是imageView的宽高。然后是初始化canvas，paint。接下来是监听imageView的触摸事件。

当手指点击屏幕时记录下xy轴的位置，手指移动时只需要调用canvas的drawLine方法就可以画出一条线了。给drawLine方法传递初始位置，现在的位置和一个paint参数，我们可以控制画笔的粗细程度，颜色等。这里有朋友们可能会想，我调用的是canvas的drawLine方法，这和bitmap有什么关系呢？其实我们画的就是一个个像素点组成的位图，用bitmap来存储这些像素点。drawLine方法的任务就是把这些像素点记录在bitmap上面。最后就是把bitmap传给imageView显示出来。

MainActivity

package com.example.drawline
 
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
 
class MainActivity : AppCompatActivity() {
 
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
 
    image.post {
        val lineView = DrawLineView(image)
 
        text_clear.setOnClickListener { lineView.clear() }
 
        text_blue.setOnClickListener { lineView.blue() }
 
        text_red.setOnClickListener { lineView.red() }
 
        text_eraser.setOnClickListener { lineView.eraser() }
    }
}
}

因为创建bitmap时我们传递的了imageView的宽高，如果image View的宽高还没测量完就传到bitmap里面，这时候传递的可能是负数，这导致无法创建bitmap。所以这里先等到image View完全绘制完毕，再传递它的宽高即可。在网上看到别人用了一张背景图，然后传给bitmap的是这个背景图的大小，这也是解决办法之一。大家可以按照自己的需求选择合理的方法就可以。

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

您可能感兴趣的文章:

Android仿微信雷达辐射搜索好友(逻辑清晰实现简单)
仿微信雷达扫描，仿安卓微信、云播雷达扫描动画效果点击中间的黑色圆圈开始扫描动画，再次点击复位，需要这种效果的朋友可以自己下载看一下
2016-02-02
android ToolBar的简单使用
这篇文章主要为大家详细介绍了android ToolBar的简单使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-12-12
Android实现原生分享功能
这篇文章主要介绍了Android实现原生分享功能，只能分享文字和图片，不能单独分享图片或者文字，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
Android 自定义View实现任意布局的RadioGroup效果
这篇文章主要介绍了Android 自定义View实现任意布局的RadioGroup,需要的朋友可以参考下
2018-11-11
android实现App活动定时自动跳转效果
本篇文章主要介绍了android实现App活动定时自动跳转效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
Android开发中自定义 editText下划线
这篇文章主要介绍了Android开发中自定义 editText下划线的相关资料,需要的朋友可以参考下
2023-03-03
Android中ListView使用示例介绍
大家好，本篇文章主要讲的是Android中ListView使用示例介绍，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下，方便下次浏览
2022-01-01
Android更新UI的四种方法详解
大家都知道由于性能要求，android要求只能在UI线程中更新UI，要想在其他线程中更新UI，我大致总结了4种方式，有需要的朋友们可以参考借鉴。
2016-09-09
手把手教你用Android自定义饼状图
最近在项目中需要用到简单的饼形图统计，我们就没必要去找什么开源的，可以尝试自己画一下。现在将实现的过程分享给大家，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-10-10
Android加载View中Background详解
本文讲解的是Android什么时候进行View中Background的加载，十分的详尽，十分全面细致，附上所有代码，这里推荐给大家，希望大家能够喜欢。
2015-03-03