利用UI的基礎 – Canvas畫布製作第一個遊戲：刮刮樂
前言:
在Apple/Android的世界裡，所有畫面上的基本元件，像是TextView、EditText、ImageView等等，都是繼承自View，而開發者可以藉由View的OnDraw事件，把控制項所存在的範圍，依照開發者的需求，使用基本的畫點、畫線、畫圓、畫文字或是將圖片繪製在View上，而使View客制化成APP所需的畫面，例如:圖表，就是將資料，經過解析後，化為畫布上的X Y座標，最後再將各個點連線，就成為了我們看到的一張張圖表。
程式也可以經由基本的Canvas，組合各種圖片，定義各種行為，並加上一些規則，就可以成為一個簡單的遊戲，例如刮刮樂。
思路:
首先我們先了解規則，刮刮樂是由兩個塗層覆蓋組成，上層有一層可以被刮除的塗層，下層則顯示刮除後的結果，當上層被刮除後，就會顯示刮刮是否中獎。
以此規則，我們可以先思考，先建立一個Class繼承View，並在OnDraw方法裡，使用Canvas.drawBitmap方法，繪製圖片作為刮除後顯示的畫面，再利用Canvas.drawBitmap繪製上層可被刮除的塗層，再將畫筆設定形狀、大小、並設定為實心，最重要的是設定畫筆的X Fermode為new PorterDuffXfermode(PorterDuff.Mode.DST_OUT)，X Fermode是一種影像進行混和時，要顯示的模式。而PorterDuff.Mode.DST_OUT則是將上層的影像繪製成透明的模式，下圖顯示沒有設定XFermode時，使用drawPath繪製路徑的畫面：
下方為設定XFermode後，使用drawPath繪製路徑的畫面：
比較了一下如果設定了Xfermode與沒有設定的結果，大家就會了解，設定XFermode正好適合我們此次文章刮刮樂的主題，最後，再透過onTouchEvent偵測手指將手指點下、移動到放開時的X、Y座標，再透過Canvas.drawPath方法，將紀錄的所有點連成線，由於設定XFermode的關係，所有的線都會是透明的，將繪製的透明線佈滿上層的塗層後，畫面上僅會留下下層的成果圖片，就達成了刮刮樂的目的。
透過以上的說明後，大家是否對刮刮樂的撰寫方式，有了方向呢?接下來為您帶來刮刮樂原始碼：
1. 首先宣告Class繼承View：
2. 實作建構式:
3. 接著設定初始化方法：
4. 設定透明的畫筆：
4.1. 第二、三行為設置繪製出的圖形為抗鋸齒狀及防止圖形抖動，為美化繪製的作用
4.2. 第四行為設定繪製出的圖形為填滿繪製區域
4.3. 第五行為設定畫筆大小
4.4. 第六行為文章最開始所說的，設定圖形為混和模式，且繪製區域為透明
5. 設定紀錄手指滑過的路徑
5.1. 第一到三行，為取得目前手指在螢幕上的X、Y座標
5.2. 第六到十一行，為記錄手指按下螢幕的座標，並初始化路徑後，重新畫筆位置移動到該座標
5.3. 第十二到十四行，忽略手指點下後移動的事件
5.4. 第十五行，手指移開螢幕時，重新設定畫筆大小，並記錄移開手指時的座標
5.5. 第二十行，重要的一點，當在onTouch事件裡，有更動畫面時，需要呼叫invalidate()方法，才可使畫面重繪
成果畫面如下圖：
結語：
了解Canvas之後，遇到專案上各種形形色色的各種UI，就不再擔心找不到SDK去解決各種需求，利用Canvas就可以讓開發者像是畫家一樣，自行刻畫出符合需求的畫面囉！
