利用Xfermode裁切圆形
2019-09-28 本文已影响0人
feifei_fly
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中颜色混合模式
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)
}
被裁切的原始图片
image.png
裁切后的图片:
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)
}
运行结果:
image.png
一看运行结果,有点懵了。
canvas.drawRoundRect(mRectF,measuredWidth/2.0f, measuredHeight/2.0f,paint)
在DST 像素基础上 画圆形，为什么最终结果似乎没有被裁切？
将混合模式修改为SRC_IN，结果也是不符合预期的:
paint.setXfermode(PorterDuffXfermode(PorterDuff.Mode.SRC_IN))
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
