毛玻璃擦除效果的实现

效果

国际惯例，先上图~

擦出效果.gif

思路

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

代码

指尖路径

• 手指擦除的线比较粗，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
  }
  

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

  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
  }
  

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

擦拭效果.png

毛玻璃效果

• 一般情况下就已经可以使用了，但我这里又封装了一层，写了个自定义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"/>

src中放入图片即可。

说明

最终的代码丰富了些测量方面的细节，上面只贴出了关键代码，有需要完整代码的小伙伴可以私信我。大家共同学习，一起进步。

参考和致谢

参考文章：Android项目刮刮奖详解