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有十八種模式，後面谷歌又添加了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中畫出用戶的手指的移動痕跡

測試圖片