您的位置:首页技术文章
文章详情页

Android实现画板功能(二)

【字号: 日期:2022-09-18 16:09:03浏览:8作者:猪猪

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

前言

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

效果图

既然开发出了画板,那就随便画一点吧(画图我已经尽力了)。

Android实现画板功能(二)

布局文件

<?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'> <RelativeLayoutandroid: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: 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: 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: 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: 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> <ImageViewandroid: 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: Paintprivate var canvas: Canvasprivate var bitmap: Bitmapprivate var imageView:ImageViewprivate var startX = 0fprivate 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.xstartY = event.y } MotionEvent.ACTION_MOVE -> {val endX = event.xval endY = event.ycanvas.drawLine(startX, startY, endX, endY, defaultPaint)startX = event.xstartY = event.yimageView.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.AppCompatActivityimport android.os.Bundleimport 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
相关文章: