毛玻璃擦出效果的实现

效果

国际惯例，先上图~

思路

算不上什么思路，就是想了下大概要用上哪些技术，自定义view没得说，onTouchEvent()要重写，获取指尖路径；
擦除动画得用上Xfermode;
高斯模糊效果的两种方案。恩，应该就这些了吧。

代码

指尖路径

手指擦除的线比较粗，paint搞粗一点，再弄个圆角：

paint.apply {
    color = Color.WHITE
    style = Paint.Style.STROKE
    isAntiAlias = true
    strokeWidth = 70f
    strokeJoin = Paint.Join.ROUND
    strokeCap = Paint.Cap.ROUND
}

onTouchEvent里面保存路径到path

override fun onTouchEvent(event: MotionEvent): Boolean {
    val x = event.x
    val y = event.y
    when(event.action){
        MotionEvent.ACTION_DOWN -> {
            pointX = x
            pointY = y
            path.moveTo(pointX,pointY)
        }
        MotionEvent.ACTION_MOVE ->{
            val moveX = abs(x - pointX)
            val moveY = abs(y - pointY)
            if (moveX>10||moveY>10){
                path.lineTo(x, y)
            }
        }
    }
    invalidate()
    return true
}

到这一步基本可以实现屏幕上手画出线条来。

1
2
3

override fun onDraw(canvas: Canvas) {
    canvas.drawPath(path, paint)
}

擦出效果

这里要用到Xfermode的相关知识。（我这有采坑指南和示例代码一份，遇到问题可供参考）

onDraw()方法

private val xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
...
init{
    setLayerType(View.LAYER_TYPE_SOFTWARE, null)//关闭硬件加速
}
override fun onDraw(canvas: Canvas) {
    canvas.drawPath(path, paint)
    paint.xfermode = xfermode
    canvas.drawBitmap(bitmap,0f,0f,paint)
    paint.xfermode = null
}

到这里应该会有如下效果：

毛玻璃效果

一般情况下就已经可以使用了，但我这里又封装了一层，写了个自定义View（MatteWipeView）继承了FramLayout,把下面这个布局封装了起来：

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    
    <ImageView
        android:id="@+id/matte"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="matrix"/>

    /** 刚才的自定义View **/
    <com.cy.mycodelearn.view.WipeView
        android:id="@+id/wipeview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</FrameLayout>

然后在封装的布局代码中，把毛玻璃效果添加到了imageView中去，并加了一些可配置的属性。

private fun getTypeArray(attrs: AttributeSet?) {
    val a = context.obtainStyledAttributes(attrs, R.styleable.MatteWipeView)
    drawable = a.getDrawable(R.styleable.MatteWipeView_src)
    radius = a.getInt(R.styleable.MatteWipeView_radius,10)
    a.recycle()
}

private fun initLayout() {
    LayoutInflater.from(context).inflate(R.layout.widget_mattwipe, this)
    bitmap = (drawable as BitmapDrawable).bitmap
    wipeview.setBitmap(bitmap)
    val blurBit = rsBlur(context,bitmap.copy(Bitmap.Config.ARGB_8888,true),radius)
    matte.setImageBitmap(blurBit)
}

最后的使用

<com.cy.mycodelearn.view.MatteWipeView
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:src="@mipmap/girl"/>