快捷導(dǎo)航

Android實(shí)現(xiàn)畫板功能(二)

更新時(shí)間：2021年09月10日 15:29:35 作者：吐?tīng)柡榻瑿oding

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)畫板功能的第二篇，使用imageView，bitmap方式實(shí)現(xiàn)畫板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android實(shí)現(xiàn)畫板功能的具體代碼，講解使用imageView，bitmap的方式實(shí)現(xiàn)畫板功能，供大家參考，具體內(nèi)容如下

前言

在上一篇Android實(shí)現(xiàn)畫板功能（一）文章中我介紹過(guò)用自定義view的方式實(shí)現(xiàn)畫板功能，在這篇文章中繼續(xù)講解使用imageView，bitmap的方式實(shí)現(xiàn)畫板功能。也是非常簡(jiǎn)單，初始化canvas，paint，創(chuàng)建和imageView一樣大的bitmap，當(dāng)手指點(diǎn)擊屏幕時(shí)記錄下初始位置，手指移動(dòng)時(shí)傳遞當(dāng)前位置，調(diào)用canvas的draw Line方法就可以實(shí)現(xiàn)畫圖的效果了。如果想要保存畫出來(lái)的圖片，把bitmap保存下來(lái)即可。

效果圖

既然開發(fā)出了畫板，那就隨便畫一點(diǎn)吧（畫圖我已經(jīng)盡力了）。

布局文件

<?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="藍(lán)色"
            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，傳進(jìn)來(lái)的bitmap的寬高就是imageView的寬高。然后是初始化canvas，paint。接下來(lái)是監(jiān)聽(tīng)imageView的觸摸事件。

當(dāng)手指點(diǎn)擊屏幕時(shí)記錄下xy軸的位置，手指移動(dòng)時(shí)只需要調(diào)用canvas的drawLine方法就可以畫出一條線了。給drawLine方法傳遞初始位置，現(xiàn)在的位置和一個(gè)paint參數(shù)，我們可以控制畫筆的粗細(xì)程度，顏色等。這里有朋友們可能會(huì)想，我調(diào)用的是canvas的drawLine方法，這和bitmap有什么關(guān)系呢？其實(shí)我們畫的就是一個(gè)個(gè)像素點(diǎn)組成的位圖，用bitmap來(lái)存儲(chǔ)這些像素點(diǎn)。drawLine方法的任務(wù)就是把這些像素點(diǎn)記錄在bitmap上面。最后就是把bitmap傳給imageView顯示出來(lái)。

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() }
    }
}
}

因?yàn)閯?chuàng)建bitmap時(shí)我們傳遞的了imageView的寬高，如果image View的寬高還沒(méi)測(cè)量完就傳到bitmap里面，這時(shí)候傳遞的可能是負(fù)數(shù)，這導(dǎo)致無(wú)法創(chuàng)建bitmap。所以這里先等到image View完全繪制完畢，再傳遞它的寬高即可。在網(wǎng)上看到別人用了一張背景圖，然后傳給bitmap的是這個(gè)背景圖的大小，這也是解決辦法之一。大家可以按照自己的需求選擇合理的方法就可以。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: