8.3.8 Paint API之—— Xfermode与PorterDuff详解(五)

本节引言：

前一节里，已经顺手做了一个基于Xfermode的图片混排案例——擦美女衣服的Demo；再加上更早前用Xfermode实现圆角和圆形ImageView的内容，到这里，大家对Xfermode应该已经不算陌生，至少算是摸到门道了。那这一节，就继续把这个系列收个尾：用Xfermode里的ProterDuff.SRC_IN模式，来做一个文字加载效果。照例，先把ProterDuff的模式图贴出来：

本节例子参考自：Android Paint之 setXfermode PorterDuffXfermode 讲解 嗯，话不多说，开始本节内容~

1.要实现的效果图以及实现流程分析：

要实现的效果图：

实现流程分析：

Step 1.首先，一个文字图片(透明背景)

Step 2.初始化画笔，背景图片(DST)，矩形Rect(SRC)

Step 3.先保存图层，接着先绘制背景图，设置混排模式，然后绘制Rect，清除混排模式 接着回复保存的图层，最后修改下Rect区域高度，调用invalidate()让View重绘！

如果流程分析有点不懂，直接看代码，超简单~

2.代码实现：

首先是屏幕工具类，ScreenUtil.ja va，这里就不贴了，之前的几节中有贴过！ 然后是我们的自定义View类：LoadTextView.ja va：

/**
 * Created by Jay on 2015/10/26 0026.
 */
public class LoadTextView extends View {
private PorterDuffXfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    private Bitmap backBitmap;
    private Paint mPaint;
    private int mBitW, mBitH;
    private int mCurW, mCurH, mCurTop;
    private Rect mDynamicRect;
public LoadTextView(Context context) {
        this(context, null);
    }
    public LoadTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mCurW = ScreenUtil.getScreenW(context);
        mCurH = ScreenUtil.getScreenH(context);
        init();
    }
    public LoadTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
private void init() {
        //画笔初始化：
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setFilterBitmap(true);
        mPaint.setDither(true);
        mPaint.setColor(Color.RED);
        //背部图片的初始化
        backBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_string);
        mBitH = backBitmap.getHeight();
        mBitW = backBitmap.getWidth();
        //设置当前的高度
        mCurTop = mBitH;
        mDynamicRect = new Rect(0, mBitH, mBitW, mBitH);  //初始化原图
    }
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int sa veLayerCount = canvas.sa veLayer(0, 0, mCurW, mCurH, mPaint, Canvas.ALL_SA VE_FLAG);
        canvas.drawBitmap(backBitmap, 0, 0, mPaint);// 绘制目标图
        mPaint.setXfermode(mXfermode);    //设置混排模式
        canvas.drawRect(mDynamicRect, mPaint);   //绘制源图
        mPaint.setXfermode(null);         //清除混排模式
        canvas.restoreToCount(sa veLayerCount);    //恢复保存的图层
        // 改变Rect区域，假如
        mCurTop -= 2;
        if (mCurTop <= 0) {
            mCurTop = mBitH;
        }
        mDynamicRect.top = mCurTop;
        invalidate();    //重绘
    }
}

嗯，没有了，就上面这么点代码，就实现了如图所示的效果，是不是很简单咧~

要coder-pig字体的图片么，贴下~

3.本节代码示例下载：

XfermodeDemo3.zip

本节小结：

这一节继续拿PorterDuff的SRC_IN模式做个“文字加载”效果。结合前面已经演示过的DST_IN模式——用来实现圆形和圆角ImageView，以及DST_OUT模式——实现擦掉美女衣服，其实对Xfermode的基本用法，应该已经能摸出一些门道了。

当然，也得实话实说，这几个例子本身并没有太强的实际业务意义，真正的项目开发里基本用不上。但它们特别适合拿来帮助理解原理。说白了，这就像练功夫：师傅能把你领进门，后面怎么练、能练到什么程度，还得看自己。基础教程的作用，更多是提供一个清晰的入口；要真正吃透并灵活用起来，关键还是多看优秀代码，多动手实践。好了，这一节就先聊到这里。