圆角遮罩效果

一图胜千言

这种效果用于在裁剪图片，确定裁剪范围；或者APP引导用户，突显某个区域，还是挺实用。

1.引言

这是一个自定义View练习的Demo，通过两种方式实现此效果，通过本文可以学习到

• Xfermode的使用
• View级别的离屏缓冲
• Canvas的离屏缓冲
• 自定义属性的使用
• Canvas 的常用且实用的 API

2.源码

2.1.RoundRectCoverView.kt

class RoundRectCoverView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)

    private var mPadding = 40.dp //间距
    private var mRoundCorner = 10.dp //圆角矩形的角度
    private var mCoverColor = "#99000000".toColorInt()//遮罩的颜色

    private val bounds = RectF()
    private val porterDuffXfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)
    private val clipPath = Path()

    init {
        //开启View级别的离屏缓冲,并关闭硬件加速，使用软件绘制
        setLayerType(LAYER_TYPE_SOFTWARE, null)

        //通过TypeArray 获取 xml 配置的属性
        val ta = context.obtainStyledAttributes(attrs, R.styleable.RoundRectCoverView)
        mPadding = ta.getDimension(R.styleable.RoundRectCoverView_roundPadding, 40.dp)
        mRoundCorner = ta.getDimension(R.styleable.RoundRectCoverView_roundCorner, 10.dp)
        mCoverColor = ta.getColor(R.styleable.RoundRectCoverView_roundCoverColor, "#99000000".toColorInt())

        ta.recycle()

    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        //设置离屏缓冲的范围
        bounds.set(0f, 0f, width.toFloat(), height.toFloat())
        //设置Clip Path的矩形区域
        clipPath.addRoundRect(mPadding, mPadding, width - mPadding, height - mPadding, mRoundCorner, mRoundCorner, Path.Direction.CW)
    }

    override fun onDraw(canvas: Canvas) {
//        fun1(canvas)
        fun2(canvas)

    }

    /**
     * 方法一通过 paint 的 xfermode 绘制遮罩
     */
    private fun fun1(canvas: Canvas) {
        //先画一个圆角矩形,也就是透明区域
        canvas.drawRoundRect(mPadding, mPadding, width - mPadding, height - mPadding, mRoundCorner, mRoundCorner, paint)
        //设置遮罩的颜色
        paint.color = mCoverColor
        //设置paint的 xfermode 为PorterDuff.Mode.SRC_OUT
        paint.xfermode = porterDuffXfermode
      	//画遮罩的矩形
        canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)
        //清空paint 的 xfermode
        paint.xfermode = null
    }

    /**
     * 方法二通过 canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.SRC)绘制遮罩
     */
    private fun fun2(canvas: Canvas) {
        //Canvas的离屏缓冲
        val count = canvas.saveLayer(bounds, paint)
        //KTX的扩展函数相当于对Canvas的 save 和 restore 操作
        canvas.withSave {
            //画遮罩的颜色
            canvas.drawColor(mCoverColor)
            //按Path来裁切
            canvas.clipPath(clipPath)
            //画镂空的范围
            canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.SRC)
        }
        //把离屏缓冲的内容,绘制到View上去
        canvas.restoreToCount(count)
    }
}

重点：两种离屏缓冲的方式

2.2attr代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundRectCoverView">
        <attr name="roundCorner" format="dimension" />
        <attr name="roundPadding" format="dimension" />
        <attr name="roundCoverColor" format="color" />
    </declare-styleable>
</resources>

2.3xml代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/captain_america"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.jhb.customviewcollection.RoundRectCoverView.RoundRectCoverView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:roundCorner="10dp"//角度
        app:roundCoverColor="#aa000000"//遮罩颜色
        app:roundPadding="30dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

3.源码地址

RoundRectCoverView.kt