# 8.3.8 Paint API之—— Xfermode與PorterDuff詳解(五) ## 本節引言： > 好的，上一節中，我們又寫了一個關于Xfermode圖片混排的例子——擦美女衣服的Demo，加上前面的 利用Xfermode來實現圓角或圓形ImageView，相信大家對Xfermode已經不再像以前那么陌生了，或者 說有點熟悉了，嗯，本節我們來寫Xfermode的最后一個例子，通過Xfermode的ProterDuff.**SRC_IN** 模式來實現文字加載的效果！還是得貼下ProterDuff的模式圖： > >  > > 本節例子參考自：[Android Paint之 setXfermode PorterDuffXfermode 講解](http://blog.csdn.net/tianjian4592/article/details/44783283) 嗯，話不多說，開始本節內容~ ## 1.要實現的效果圖以及實現流程分析： **要實現的效果圖**：  **實現流程分析**： > **Step 1**.首先，一個文字圖片(透明背景) > > **Step 2**.初始化畫筆，背景圖片(DST)，矩形Rect(SRC) > > **Step 3**.先保存圖層，接著先繪制背景圖，設置混排模式，然后繪制Rect，清除混排模式 接著回復保存的圖層，最后修改下Rect區域高度，調用invalidate()讓View重繪！ 如果流程分析有點不懂，直接看代碼，超簡單~ ## 2.代碼實現： 首先是屏幕工具類，ScreenUtil.java，這里就不貼了，之前的幾節中有貼過！ 然后是我們的自定義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() { //畫筆初始化： 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 saveLayerCount = canvas.saveLayer(0, 0, mCurW, mCurH, mPaint, Canvas.ALL_SAVE_FLAG); canvas.drawBitmap(backBitmap, 0, 0, mPaint);// 繪制目標圖 mPaint.setXfermode(mXfermode); //設置混排模式 canvas.drawRect(mDynamicRect, mPaint); //繪制源圖 mPaint.setXfermode(null); //清除混排模式 canvas.restoreToCount(saveLayerCount); //恢復保存的圖層 // 改變Rect區域，假如 mCurTop -= 2; if (mCurTop <= 0) { mCurTop = mBitH; } mDynamicRect.top = mCurTop; invalidate(); //重繪 } } ``` 嗯，沒有了，就上面這么點代碼，就實現了如圖所示的效果，是不是很簡單咧~ 要coder-pig字體的圖片么，貼下~  ## 3.本節代碼示例下載： [XfermodeDemo3.zip](http://static.runoob.com/download/XfermodeDemo3.zip) ## 本節小結： > 好的，本節我們又用PorterDuff的**SRC_IN**模式來寫一個文字加載的效果，加上前面的： **DST_IN**模式實現圓形和圓角ImageView，以及**DST_OUT**模式來實現擦掉美女衣服，相信 大家對Xfermode的使用已經有眉目了，當然這些例子都是沒有太大意義的，實際開發根本不會 用到，不過很便于大家理解~就好像練功夫，師傅領進門，修行靠自身！基礎教程只是一個引導 而已，要真正掌握并學以致用還需靠你們自己，多閱讀別人的優秀的代碼，以及多動手！ 好的，就說這么多，謝謝~