Android 自定义View练手Demo（一）实现圆角遮罩效果

最新推荐文章于 2024-07-15 03:44:44 发布

AboBack

最新推荐文章于 2024-07-15 03:44:44 发布

阅读量845

点赞数

分类专栏： Android 自定义View 文章标签： android canvas 自定义View Bitmap CircleAvatar

本文链接：https://blog.csdn.net/jhbxyz/article/details/107940531

版权

本文介绍了如何在Android中实现圆角遮罩效果，通过两种方法利用Canvas和PorterDuff.Mode.SRC_OUT实现。此外，还讲述了如何为自定义View设置属性，包括圆角大小和遮罩颜色。

摘要由CSDN通过智能技术生成

Android 自定义View系列文章

Android 自定义View练手Demo（一）实现圆角遮罩效果
 Android 自定义View练手Demo（二）实现圆形头像效果
 Android 自定义View练手Demo（三）实现微信拍一拍的动画效果

Android自定义View实现圆角遮罩效果

一图胜千言，有一个遮罩就会凸显出重点区域

在这里插入图片描述

本文通过两种方式来实现这种效果，来达到自定义View练手的效果

此效果的用途

在裁剪图片，确定裁剪范围
在APP中引导用户，突显某个区域

这是一个麻雀虽小五脏俱全的小Demo了，非常适合练手。

1.引言

通过本文可以学习到

Canvas和Paint 的常用且实用的 API
Xfermode的使用
View级别的离屏缓冲的开启方式
Canvas的离屏缓冲和View的离屏缓冲的区别
如何给自定义View设置自定义属性的使用

2.第一种实现方式

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 porterDuffXfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)
  
   	init {
   
        //开启View级别的离屏缓冲,并关闭硬件加速，使用软件绘制
        setLayerType(LAYER_TYPE_SOFTWARE, null)
    }
    override fun onDraw(canvas: Canvas) {
   
        //先画一个圆角矩形,也就是透明区域(Destination image)
        canvas.drawRoundRect(mPadding, mPadding, width - mPadding, height - mPadding, mRoundCorner, mRoundCorner, paint)
        //设置遮罩的颜色
        paint.color = mCoverColor
        //设置paint的 xfermode 为PorterDuff.Mode.SRC_OUT
        paint.xfermode = porterDuffXfermode
        //画遮罩的矩形(Source image)
        canvas.drawRect(0f, 0f, width.