Android TextView实现镂空效果_android 图标镂空porterduffxfermode

效果图

接到一个需求，需要实现文字镂空(按钮字体颜色与按钮父布局的背景色一直)，最终效果如下:

思路

通过设置图层合成是的图像过滤模式PorterDuff.Mode，来达到镂空效果，对于PorterDuff.Mode的理解可以从参考：各个击破搞明白PorterDuff.Mode。

“以SCREEN的计算方式为例：[Sa + Da - Sa * Da, Sc + Dc - Sc * Dc]，“[……]”里分为两部分，其中“,”前的部分“Sa + Da - Sa * Da”计算的值代表SCREEN模式的Alpha通道，而“,”后的部分“Sc + Dc - Sc * Dc”计算SCREEN模式的颜色值，图形混合后的图片依靠这个矢量来计算ARGB的值
作者：Alexyz123
链接：https://www.jianshu.com/p/d11892bbe055”

数组计算帮助理解：前部分Ua运算代表采纳区域,Uc运算代表采纳内容(U = [S|D]);
模式的命名理解：由后往前读，例如:DST_OUT, 可以理解为只显示OUT(不相交)区域，内容为DST;SRC_OUT为只显示OUT区域，内容为SRC。

如下代码展示了，在mXfermode模式下，将srcBmp合并到dstBmp的函数调用过程。

		//将绘制操作保存到新的图层，因为图像合成是很昂贵的操作，将用到硬件加速，这里将图像合成的处理放到离屏缓存中进行
       int saveCount = canvas.saveLayer(srcRect, mPaint, Canvas.ALL_SAVE_FLAG);
       //绘制目标图
       canvas.drawBitmap(dstBmp, null, dstRect, mPaint);
       //设置混合模式
       mPaint.setXfermode(mXfermode);
      //绘制源图
       canvas.drawBitmap(srcBmp, null, srcRect, mPaint);
       //清除混合模式
       mPaint.setXfermode(null);
       //还原画布
       canvas.restoreToCount(saveCount);
1
2
3
4
5
6
7
8
9
10
11
12

分析

镂空效果可以转化为如下的图片合并，最终需要的效果是两图相交，且只取不相交的区域，该区域内容由左边的图片填充。其中，如果左图为DstBitmap则模式为DST_OUT,如果右图作为DstBitmap则模式为SRC_OUT。

代码

自定义属性:

<--!:attrs.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="HollowTextView">
        <attr name="htv_bgColor" format
1
2
3
4