# 8.3.7 Paint API之—— Xfermode與PorterDuff詳解(四) ## 本節引言： > 上節我們寫了關于Xfermode與PorterDuff使用的第一個例子：圓角&圓形圖片ImageView的實現， 我們體會到了PorterDuff.Mode.DST_IN給我們帶來的好處，本節我們繼續來寫例子練練手， 還記得[8.3.2 繪圖類實戰示例](http://www.runoob.com/w3cnote/android-tutorial-bitmap-demo.html "8.3.2 繪圖類實戰示例")給大家帶來的拔掉美女衣服的實現嗎？ > >  > > 當時我們的實現方案是，將手指觸碰區域附近的20*20個像素點設置為透明，效果圖是這樣的： > >  > > 不知道你有沒有發現一個問題，我們擦美女衣服的時候，擦拭的時候都是方塊的，但是我們畫圖板 畫圖的時候，劃線都是很平滑的，有沒有辦法將兩者結合起來，我們擦衣服時也是圓滑的呢？ 答案肯定是有的，就是使用Xfermode咯！本節我們使用另一個模式，**DST_OUT**模式！ 在不相交的地方繪制目標圖 > >  > > 如果你忘記了某個模式或者連18種模式都沒見過的話，那么請移步： [Android基礎入門教程——8.3.5 Paint API之—— Xfermode與PorterDuff詳解(二)](/w3cnote/android-tutorial-xfermode-porterduff2.html) 另外，還是要貼下PorterDuff.Mode的效果圖： > >  > > 嗯，話不多說，開始本節內容~ ## 1.要實現的效果圖以及實現流程分析： **要實現的效果圖**：  > 嗯，不知道你看了那個Gif圖多少次了呢？不知道圖中是否適合大家的口味，小豬 是從別人的APP上扒下來的，別問我番號或者留郵箱什么的，我什么都不知道~找番什么的， 問群里的老司機——基神吧，好的，我們來分析下實現流程吧~ > > * 我們來說說原理，其實就是兩個Bitmap，一前一后，前面的是穿著衣服的，后面的是沒穿衣服的， 然后通過一個Path來記錄用戶繪制出來的圖形，然后為我們的畫筆設置DST_OUT的模式，那么 與Path重疊部分的DST(目標圖)，就是穿著衣服的圖，會變成透明！好噠，很簡單！ 我們再慢慢細化！ > * 首先我們需要兩個Bitmap，用來存儲前后兩張圖片，這里我們讓兩個Bitmap都全屏！ > * 接著設置下畫筆，圓角，筆寬，抗鋸齒等！ > * 再接著定義一個畫Path，即用戶繪制區域的方法，設置Xfermode后畫區域而已！ > * 然后重寫onTouchEvent方法，這部分和之前的自定義畫圖板是一樣的！ > * 最后重寫onDraw()方法，先繪制背景圖片，調用用戶繪制區域的方法，再繪制前景圖片！ 可能看上去有點復雜，其實不然，代碼超簡單的說~ ## 2.代碼實現： 直接就一個自定義View——**StripMeiZi.java** ``` /** * Created by Jay on 2015/10/25 0025. */ public class StripMeiZi extends View{ private Paint mPaint = new Paint(); private Path mPath = new Path(); private Canvas mCanvas; private Bitmap mBeforeBitmap; private Bitmap mBackBitmap; private int mLastX,mLastY; private int screenW, screenH; //屏幕寬高 private Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT); public StripMeiZi(Context context) { this(context, null); } public StripMeiZi(Context context, AttributeSet attrs) { super(context, attrs); screenW = ScreenUtil.getScreenW(context); screenH = ScreenUtil.getScreenH(context); init(); } public StripMeiZi(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } private void init() { //背后圖片，這里讓它全屏 mBackBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.meizi_back); mBackBitmap = Bitmap.createScaledBitmap(mBackBitmap, screenW, screenH, false); //前面的圖片，并繪制到Canvas上 mBeforeBitmap = Bitmap.createBitmap(screenW, screenH, Bitmap.Config.ARGB_8888); mCanvas = new Canvas(mBeforeBitmap); mCanvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.meizi_before), null, new RectF(0, 0, screenW, screenH), null); //畫筆相關的設置 mPaint.setAntiAlias(true); mPaint.setDither(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeJoin(Paint.Join.ROUND); // 圓角 mPaint.setStrokeCap(Paint.Cap.ROUND); // 圓角 mPaint.setStrokeWidth(80); // 設置畫筆寬 } private void drawPath() { mPaint.setXfermode(mXfermode); mCanvas.drawPath(mPath, mPaint); } @Override protected void onDraw(Canvas canvas) { canvas.drawBitmap(mBackBitmap, 0, 0, null); drawPath(); canvas.drawBitmap(mBeforeBitmap, 0, 0, null); } @Override public boolean onTouchEvent(MotionEvent event) { int action = event.getAction(); int x = (int) event.getX(); int y = (int) event.getY(); switch (action) { case MotionEvent.ACTION_DOWN: mLastX = x; mLastY = y; mPath.moveTo(mLastX, mLastY); break; case MotionEvent.ACTION_MOVE: int dx = Math.abs(x - mLastX); int dy = Math.abs(y - mLastY); if (dx > 3 || dy > 3) mPath.lineTo(x, y); mLastX = x; mLastY = y; break; } invalidate(); return true; } } ``` 布局代碼**activity_main.xml**： ``` <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.jay.xfermodedemo2.StripMeiZi android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout> ``` ## 3.代碼示例下載： [XfermodeDemo2.zip](http://static.runoob.com/download/XfermodeDemo2.zip) ## 本節小結： > 好的，本節我們寫了Xfermode與PorterDuff的另一個實戰例子——手撕美女衣服的Demo，相比起我們之前 那種撕美女衣服(讓觸摸點附近20*20的像素點變成透明)的方式斯文多了~代碼也簡單很多是吧，有沒有 體會到Android圖像混排Xfermode給我們帶來的好處，或者對于自定義控件的重要性！嗯，還等什么， 打開你的IDE，把代碼擼一遍，嘗嘗手撕美女衣服的快感吧~