Android Paint API之—— Xfermode與PorterDuff詳解(五)

本節(jié)引言：

好的，上一節(jié)中，我們又寫(xiě)了一個(gè)關(guān)于Xfermode圖片混排的例子——擦美女衣服的Demo，加上前面的 利用Xfermode來(lái)實(shí)現(xiàn)圓角或圓形ImageView，相信大家對(duì)Xfermode已經(jīng)不再像以前那么陌生了，或者 說(shuō)有點(diǎn)熟悉了，嗯，本節(jié)我們來(lái)寫(xiě)Xfermode的最后一個(gè)例子，通過(guò)Xfermode的ProterDuff.SRC_IN 模式來(lái)實(shí)現(xiàn)文字加載的效果！還是得貼下ProterDuff的模式圖：

本節(jié)例子參考自：Android Paint之 setXfermode PorterDuffXfermode 講解 嗯，話不多說(shuō)，開(kāi)始本節(jié)內(nèi)容~

1.要實(shí)現(xiàn)的效果圖以及實(shí)現(xiàn)流程分析：

要實(shí)現(xiàn)的效果圖：

實(shí)現(xiàn)流程分析：

Step 1.首先，一個(gè)文字圖片(透明背景)

Step 2.初始化畫(huà)筆，背景圖片(DST)，矩形Rect(SRC)

Step 3.先保存圖層，接著先繪制背景圖，設(shè)置混排模式，然后繪制Rect，清除混排模式 接著回復(fù)保存的圖層，最后修改下Rect區(qū)域高度，調(diào)用invalidate()讓View重繪！

如果流程分析有點(diǎn)不懂，直接看代碼，超簡(jiǎn)單~

2.代碼實(shí)現(xiàn)：

首先是屏幕工具類，ScreenUtil.java，這里就不貼了，之前的幾節(jié)中有貼過(guò)！ 然后是我們的自定義View類：LoadTextView.java：

/**
 * 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() {
        //畫(huà)筆初始化：
        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();
        //設(shè)置當(dāng)前的高度
        mCurTop = mBitH;
        mDynamicRect = new Rect(0, mBitH, mBitW, mBitH);  //初始化原圖
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int saveLayerCount = canvas.saveLayer(0, 0, mCurW, mCurH, mPaint, Canvas.ALL_SAVE_FLAG);
        canvas.drawBitmap(backBitmap, 0, 0, mPaint);// 繪制目標(biāo)圖
        mPaint.setXfermode(mXfermode);    //設(shè)置混排模式
        canvas.drawRect(mDynamicRect, mPaint);   //繪制源圖
        mPaint.setXfermode(null);         //清除混排模式
        canvas.restoreToCount(saveLayerCount);    //恢復(fù)保存的圖層
        // 改變Rect區(qū)域，假如
        mCurTop -= 2;
        if (mCurTop <= 0) {
            mCurTop = mBitH;
        }
        mDynamicRect.top = mCurTop;
        invalidate();    //重繪
    }

}

嗯，沒(méi)有了，就上面這么點(diǎn)代碼，就實(shí)現(xiàn)了如圖所示的效果，是不是很簡(jiǎn)單咧~

要coder-pig字體的圖片么，貼下~

3.本節(jié)代碼示例下載：

XfermodeDemo3.zip

本節(jié)小結(jié)：

好的，本節(jié)我們又用PorterDuff的SRC_IN模式來(lái)寫(xiě)一個(gè)文字加載的效果，加上前面的： DST_IN模式實(shí)現(xiàn)圓形和圓角ImageView，以及DST_OUT模式來(lái)實(shí)現(xiàn)擦掉美女衣服，相信 大家對(duì)Xfermode的使用已經(jīng)有眉目了，當(dāng)然這些例子都是沒(méi)有太大意義的，實(shí)際開(kāi)發(fā)根本不會(huì) 用到，不過(guò)很便于大家理解~就好像練功夫，師傅領(lǐng)進(jìn)門(mén)，修行靠自身！基礎(chǔ)教程只是一個(gè)引導(dǎo) 而已，要真正掌握并學(xué)以致用還需靠你們自己，多閱讀別人的優(yōu)秀的代碼，以及多動(dòng)手！ 好的，就說(shuō)這么多，謝謝~