Android項目刮刮獎詳解（二）

Android項目刮刮獎詳解（一）

前言

上期我們簡單地實現了一個畫板的功能，使用者可以在上面亂寫亂畫，其實，刮刮獎也是如此，使用者刮獎的時候也是亂寫亂畫的。

刮刮獎原理

一共有兩層畫布，底層畫布存放中獎資訊的圖片，上層畫布則是一個遮蓋層，我們將底層畫布成為資訊層，上層畫布稱作為遮蓋層。
使用者再遮蓋層塗畫，我們將使用者塗畫的痕迹從遮蓋層擦除，顯示出資訊層的內容，則就實現了一個簡單的刮刮獎。

實現

基於上期的代碼，我們來講解一下。
上一期中在注釋中我也有提示到哪些代碼是今天的內容，我們拿來看看吧。

1. 設定背景圖

   首先，我們需要設定資訊層的背景圖，背景圖隨意，記得把圖片放在drawable檔案夾中

     //背景圖 BitmapDrawable bitmap = (BitmapDrawable) getResources().getDrawable(R.drawable.rewrite6);//從drawable檔案夾中獲得指定名稱的該圖片，並轉型為bitmapdrawable，R.drawable.xxx background = bitmap.getBitmap();//bitmapdrawable通過getBItmap方法得到bitmap background = Bitmap.createScaledBitmap(background,width,height,true);//利用Bitmap的靜態方法建立一個合適的bitmap（寬高都是之前onMeasure方法中擷取的，不太清楚的同學請去上期回顧一下）

2. 使用canvas畫出背景圖

   補充 xfermode

   Xfermode國外有大神稱之為過渡模式，這種翻譯比較貼切但恐怕不易理解，大家也可以直接稱之為映像混合模式，因為所謂的“過渡”其實就是映像混合的一種，這個方法跟我們上面講到的setColorFilter蠻相似的。

   查看API文檔發現其果然有三個子類：AvoidXfermode, PixelXorXfermode和PorterDuffXfermode，這三個子類實現的功能要比setColorFilter的三個子類複雜得多。

   由於AvoidXfermode, PixelXorXfermode都已經被標註為過時了，所以這次主要研究的是仍然在使用的PorterDuffXfermode：

   該類同樣有且只有一個含參的構造方法PorterDuffXfermode(PorterDuff.Mode mode)

   其中的mode有十八種模式，後面Google又添加了Add和Overlayl兩種模式，下面是十六種模式的圖解

   我們怎麼去理解這張圖呢？我們只要記住一點，先畫dst，再畫src,有同學說不好記啊，簡單，教你個口訣，先畫底（dst），再畫上（src）

   • 第一個模式clear是清除
   • 第二個src則是只顯示上層圖片
   • 第三個dst則是只顯示底層圖片
   • 第四個srcOver，顯示出dst圖片的四分之三，顯示src的全部
   • 其他的不多說了，

   我們即將用到的是dsc_out,講解一下

   先畫dst，再畫src，src消失，只剩下dst，這其實就是橡皮擦的原理，我們利用這個擦除遮蓋層就可以顯示出資訊層中的圖片了

   明白了原理之後，我們來看onDraw方法，在onDraw方法中，使用canvas將背景圖畫出，這裡順序是先畫資訊層，之後再到遮蓋層，遮蓋層將mBitmap直接畫出來，回顧一下，這裡是使用到了雙緩衝技術，canvas直接複製了mBitmap，在View中顯示出來，mBitmap其實是mCanvas在上面畫出了使用者手指的移動痕迹
   canvas.drawBitmap(background,0,0,null);//畫出資訊層

    canvas.drawBitmap(mBitmap, 0,0, null);//畫出遮蓋層 mOutterPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//設定xfermode dst\_out mCanvas.drawPath(mPath, mOutterPaint);//mCanvas在mBitmap中畫出使用者的手指的移動痕迹

測試圖片