android画布橡皮,Android画板开发之橡皮擦功能

在上一篇实现了简单的画板功能， 这篇实现橡皮擦功能，首先分析一下应该如何实现，

在andriod有个图像混合(xfermode)概念，利用这个概念我们就可以实现橡皮擦功能。

一、xfermode

paint有一个方法setxfermode(xfermode)，这个方法设置图像的混合模式。参数有三个子类：

avoidxfermode

pixelxorxfermode

porterduffxfermode

前面两个因为不支持硬件加速在api 16已经已经过时弃用了。 简单讲一下第三个。

1.1 porterduffxfermode

该类有且只有一个含参的构造方法porterduffxfermode(porterduff.mode mode)，参数就是设置图像的混合模式，下面这张图片形象地说明了各种模式的作用

我们的做橡皮擦的时候，就是用到了porterduff.mode.clear这个模式清除图像，所以说橡皮擦也是path，只是绘制的模式不一样了。

二、实现

在上一篇的文章中，实现了最简单笔画画板，就是只有一个画笔模式，所以首先添加一个橡皮擦的绘制模式。

companion object {

const val edit_mode_pen = 0x1l //画笔模式

const val edit_mode_eraser = 0x2l //橡皮擦模式

}

@retention(annotationretention.source)

@intdef(edit_mode_pen, edit_mode_eraser)

annotation class editmode

//当前编辑模式默认为画笔模式

@editmode

private var mmode: long = edit_mode_pen

/**

* 设置画笔模式

*/

fun setmodel(@editmode model:long){

mmode = model

when(model){

edit_mode_pen -> {

//画线

mpaint.xfermode = null

}

edit_mode_eraser ->{

mpaint.xfermode = porterduffxfermode(porterduff.mode.clear)

}

}

}

然后捋一下整个流程:

画笔模式，在ontouch时候画出path，绘制到view上

然后切换到橡皮擦模式，画出path，clear擦掉原来的内容

再来回切换绘制

现在重点是解决第2点，一个path怎么做到不改变原来的path基础上换个绘制模式继续画呢？

如果你考虑第2点的话，效果是这样子的：

what the fuck？(黑人问号) 这什么情况？ 其实是因为path只有一条，一直没改变。所以，引入缓存canvas和缓存bitmap，添加两个变量：

//想要绘制的内容先绘制到这个增加的canvas对应的bitmap上，

// 写完后再把这个bitmap的argb信息一次提交给上下文的canvas去绘制

private lateinit var mbufferbitmap: bitmap

private lateinit var mbuffercanvas: canvas

然后在onmeasure中进行初始化：

override fun onmeasure(widthmeasurespec: int, heightmeasurespec: int) {

super.onmeasure(widthmeasurespec, heightmeasurespec)

if(mbuffercanvas == null){

mbufferbitmap = bitmap.createbitmap(measuredwidth, measuredheight, bitmap.config.argb_8888)

//canvas绘制的内容，将会在这个mbufferbitmap内

mbuffercanvas = canvas(mbufferbitmap)

}

}

然后在ontouchevent方面里面手指移动的时候，我们在缓存canvas里面进行绘制path：

motionevent.action_move -> { //手指移动的时候

//绘制圆滑曲线，即贝塞尔曲线,贝塞尔曲线这个知识自行了解

mpath.quadto(prex,prey,event.x,event.y)

//在缓存里面绘制

mbuffercanvas.drawpath(mpath,mpaint)

//重新绘制，会调用ondraw方法

invalidate()

prex = event.x

prey = event.y

}

然后ondraw的时候，就把缓存的canvas的bitmap当前view的canvas：

override fun ondraw(canvas: canvas) {

super.ondraw(canvas)

//画出缓存bitmap的内容

canvas.drawbitmap(mbufferbitmap,0f,0f,null)

}

就可以了，看看完整的代码100多行:

class tperaserview(context: context, attr: attributeset) : view(context,attr) {

companion object {

const val edit_mode_pen = 0x1l //画笔模式

const val edit_mode_eraser = 0x2l //橡皮擦模式

}

@retention(annotationretention.source)

@intdef(edit_mode_pen, edit_mode_eraser)

annotation class editmode

//当前编辑模式默认为画笔模式

@editmode

private var mmode: long = edit_mode_pen

private var prex: float = 0.0f //上一次的触摸点x坐标

private var prey: float = 0.0f //上一次触摸点y坐标

private var mpath = path() //path路径

//画笔

private var mpaint = paint(paint.anti_alias_flag or paint.dither_flag)

//想要绘制的内容先绘制到这个增加的canvas对应的bitmap上，

// 写完后再把这个bitmap的argb信息一次提交给上下文的canvas去绘制

private lateinit var mbufferbitmap: bitmap

private lateinit var mbuffercanvas: canvas

init {

mpaint.style = paint.style.stroke //画笔为实心

mpaint.color = color.red //颜色

mpaint.strokecap = paint.cap.round //笔触为圆形

mpaint.strokewidth = 10f //画笔大小

}

override fun onmeasure(widthmeasurespec: int, heightmeasurespec: int){

super.onmeasure(widthmeasurespec, heightmeasurespec)

mbufferbitmap = bitmap.createbitmap(measuredwidth, measuredheight, bitmap.config.argb_8888)

//canvas绘制的内容，将会在这个mbufferbitmap内

mbuffercanvas = canvas(mbufferbitmap)

}

override fun ondraw(canvas: canvas) {

super.ondraw(canvas)

//画出缓存bitmap的内容

canvas.drawbitmap(mbufferbitmap,0f,0f,null)

}

override fun ontouchevent(event: motionevent): boolean {

when(event.action){

motionevent.action_down -> { //手指按下的时候

//将起始点移动到当前坐标

mpath.moveto(event.x,event.y)

//记录上次触摸的坐标，注意action_down方法只会执行一次

prex = event.x

prey = event.y

}

motionevent.action_move -> { //手指移动的时候

//绘制圆滑曲线，即贝塞尔曲线,贝塞尔曲线这个知识自行了解

mpath.quadto(prex,prey,event.x,event.y)

//在缓存里面绘制

mbuffercanvas.drawpath(mpath,mpaint)

//重新绘制，会调用ondraw方法

invalidate()

prex = event.x

prey = event.y

}

motionevent.action_up ->{

//清除路径的内容

mpath.reset()

}

}

// true：告诉系统，这个触摸事件由我来处理

// false：告诉系统，这个触摸事件我不处理，这时系统会把触摸事件传递给imageview的父节点

return true

}

/**

* 设置画笔模式

*/

fun setmodel(@editmode model:long){

mmode = model

when(model){

edit_mode_pen -> {

mpaint.xfermode = null

}

edit_mode_eraser ->{

mpaint.xfermode = porterduffxfermode(porterduff.mode.clear)

}

}

}

}

三、清空画布实现

添加一个方法,按照上面的套路，把缓存canvas绘制清除即可。

/**

* 清空画布

*/

fun clear() {

mbuffercanvas.drawcolor(0, porterduff.mode.clear)

invalidate()

}

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