利用Xfermode裁切圆形

PoterDuffXfermode 唯一的作用其实就是 对原像素和目标像素进行颜色混合。

一、如何区分 DST像素区域和SRC像素区域

setXfermode基本用法:

  
  canvas?.drawBitmap(target_bitmap, 0F, 0F, paint)
  
  paint.setXfermode(PorterDuffXfermode(PorterDuff.Mode.DST_IN))// 设置Xfermode模式
  
  canvas?.drawBitmap(mask_bitmap, 0F, 0F, paint)

记住:

  • 在paint.setXfermode()之前 在canvas上绘制的是DST(目标像素区域)
  • 在paint.setXfermode()之后,canvas上绘制的像素SRC(源像素区域)

二、DST 和SRC 的颜色混合方式

1、像素的向量表示方法:[a,c]

一个像素的颜色由四个分量组成,即ARGB。第一个分量A表示的是Alpha值,后面三个分量RGB表示了颜色。
我们用S代表源像素,源像素的颜色值可表示为[Sa, Sc],Sa中的a是alpha的缩写,Sa表示源像素的Alpha值,Sc中的c是颜色color的缩写,Sc表示源像素的RGB。
我们用D代表目标像素,目标像素的颜色值可表示为[Da, Dc],Da表示目标像素的Alpha值,Dc表示目标像素的RGB。

2、setXfermode()的像素混合方式

PoterDuffXfermode 有18中颜色混合模式


利用Xfermode裁切圆形_第1张图片
image.png

源像素与目标像素在不同混合模式下有不同的计算规则

  • CLEAR:[0, 0]
  • SRC:[Sa, Sc]
  • DST:[Da, Dc]
  • SRC_OVER:[Sa + (1 - Sa)Da, Rc = Sc + (1 - Sa)Dc]
  • DST_OVER:[Sa + (1 - Sa)Da, Rc = Dc + (1 - Da)Sc]
  • SRC_IN:[Sa * Da, Sc * Da]
  • DST_IN:[Sa * Da, Sa * Dc]
  • SRC_OUT:[Sa * (1 - Da), Sc * (1 - Da)]
  • DST_OUT:[Da * (1 - Sa), Dc * (1 - Sa)]
  • SRC_ATOP:[Da, Sc * Da + (1 - Sa) * Dc]
  • DST_ATOP:[Sa, Sa * Dc + Sc * (1 - Da)]
  • XOR:[Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc]
  • DARKEN:[Sa + Da - SaDa, Sc(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)]
  • LIGHTEN:[Sa + Da - SaDa, Sc(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)]
  • MULTIPLY:[Sa * Da, Sc * Dc]
  • SCREEN:[Sa + Da - Sa * Da, Sc + Dc - Sc * Dc]
  • ADD:Saturate(S + D)
  • OVERLAY:Saturate(S + D)

三、具体应用

PoterDuffXfermode 经常被用来

  • 裁切圆形图片,或者其他任意形状的图片
  • 将整个ViewGroup 及其中的所有子View裁切成圆形或其他形状

以裁切圆形图片为例

1、正确的裁切方式:


    /**
     * 利用Xfermode裁切图片,DST 和SRC 像素区域相同
     */
    fun testXfermode_sameSizeBitmap(){

        val measuredWidth = 200
        val measuredHeight = 200
        val sourcebitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_test)


        val finalBitmap = Bitmap.createBitmap(measuredWidth, measuredHeight, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(finalBitmap)

        //绘制DST 像素区域
        val paint = Paint(Paint.ANTI_ALIAS_FLAG)
        paint.setAntiAlias(true)
        paint.setColor(Color.RED)
        paint.setStyle(Paint.Style.FILL)
        canvas.drawBitmap(sourcebitmap,0F,0F,paint)


        //生成原形mask 图片
        val circleMask = Bitmap.createBitmap(measuredWidth, measuredHeight, Bitmap.Config.ARGB_8888) //生成原形mask图片
        val mNewCanvas = Canvas(circleMask)
        var mRectF = RectF(0F,0F,measuredWidth.toFloat(),measuredHeight.toFloat())
        mNewCanvas?.drawRoundRect(mRectF, measuredWidth/2.0f, measuredHeight/2.0f, paint)


        //设置Xfermode
        paint.setXfermode(PorterDuffXfermode(PorterDuff.Mode.DST_IN))

        //绘制SRC 像素区域
        canvas.drawBitmap(circleMask,0F,0F,paint)


        iv_test_xfermode.setImageBitmap(finalBitmap)

    }

被裁切的原始图片


利用Xfermode裁切圆形_第2张图片
image.png

裁切后的图片:


利用Xfermode裁切圆形_第3张图片
image.png

2、错误的裁切方式

/**
     * 利用Xfermode裁切图片,DST 和SRC 像素区域不同
     */
    fun testXfermode_notSameSizeRegin(){

        val measuredWidth = 200
        val measuredHeight = 200
        val sourcebitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_test)


        val finalBitmap = Bitmap.createBitmap(measuredWidth, measuredHeight, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(finalBitmap)

        //绘制DST 像素区域
        val paint = Paint(Paint.ANTI_ALIAS_FLAG)
        paint.setAntiAlias(true)
        paint.setColor(Color.RED)
        paint.strokeWidth = 2F
        paint.setStyle(Paint.Style.FILL)
        canvas.drawBitmap(sourcebitmap,0F,0F,paint)

        //设置Xfermode
        paint.setXfermode(PorterDuffXfermode(PorterDuff.Mode.DST_IN))

        //绘制SRC 像素区域
        var mRectF = RectF(0F,0F,measuredWidth.toFloat(),measuredHeight.toFloat())
        canvas.drawRoundRect(mRectF,measuredWidth/2.0f, measuredHeight/2.0f,paint)

        iv_test_xfermode.setImageBitmap(finalBitmap)

    }

运行结果:


利用Xfermode裁切圆形_第4张图片
image.png

一看运行结果,有点懵了。

 canvas.drawRoundRect(mRectF,measuredWidth/2.0f, measuredHeight/2.0f,paint)
 

在DST 像素基础上 画圆形,为什么最终结果似乎没有被裁切?

将混合模式修改为SRC_IN,结果也是不符合预期的:

paint.setXfermode(PorterDuffXfermode(PorterDuff.Mode.SRC_IN))
利用Xfermode裁切圆形_第5张图片
image.png

什么原因呢?

PoterDuffXfermode 是对DST 和SRC 相交的区域所做的颜色混合,在交集之外的像素不会受到任何影响。

关键点出在drawRoundRect()

 canvas.drawRoundRect(mRectF,measuredWidth/2.0f, measuredHeight/2.0f,paint)
 

SRC区域为 drawRoundRect()绘制的红色区域
而DST为外层的方形区域(200*200),两者的交集是整个SRC区域,所以PoterDuffXfermode起作用的区域也就只有SRC区域。

根据相关规则进行计算:

- SRC_IN:[Sa * Da, Sc * Da]
- DST_IN:[Sa * Da, Sa * Dc]

四、参考文章

https://www.jianshu.com/p/96c2bfc4f33a
https://www.jianshu.com/p/96c2bfc4f33a

你可能感兴趣的:(利用Xfermode裁切圆形)