Canvas UI Custom View xFermode

利用UI的基礎 – Canvas畫布製作第一個遊戲:刮刮樂

陳冠勳 2020/12/15 11:14:56
365

前言:

Apple/Android的世界裡,所有畫面上的基本元件,像是TextViewEditTextImageView等等,都是繼承自View,而開發者可以藉由ViewOnDraw事件,把控制項所存在的範圍,依照開發者的需求,使用基本的畫點、畫線、畫圓、畫文字或是將圖片繪製在View上,而使View客制化成APP所需的畫面,例如:圖表,就是將資料,經過解析後,化為畫布上的X Y座標,最後再將各個點連線,就成為了我們看到的一張張圖表。

程式也可以經由基本的Canvas,組合各種圖片,定義各種行為,並加上一些規則,就可以成為一個簡單的遊戲,例如刮刮樂。

思路:

首先我們先了解規則,刮刮樂是由兩個塗層覆蓋組成,上層有一層可以被刮除的塗層,下層則顯示刮除後的結果,當上層被刮除後,就會顯示刮刮是否中獎。

以此規則,我們可以先思考,先建立一個Class繼承View,並在OnDraw方法裡,使用Canvas.drawBitmap方法,繪製圖片作為刮除後顯示的畫面,再利用Canvas.drawBitmap繪製上層可被刮除的塗層,再將畫筆設定形狀、大小、並設定為實心,最重要的是設定畫筆的X Fermodenew PorterDuffXfermode(PorterDuff.Mode.DST_OUT)X Fermode是一種影像進行混和時,要顯示的模式。而PorterDuff.Mode.DST_OUT則是將上層的影像繪製成透明的模式,下圖顯示沒有設定XFermode時,使用drawPath繪製路徑的畫面:

下方為設定XFermode後,使用drawPath繪製路徑的畫面:

比較了一下如果設定了Xfermode與沒有設定的結果,大家就會了解,設定XFermode正好適合我們此次文章刮刮樂的主題,最後,再透過onTouchEvent偵測手指將手指點下、移動到放開時的XY座標,再透過Canvas.drawPath方法,將紀錄的所有點連成線,由於設定XFermode的關係,所有的線都會是透明的,將繪製的透明線佈滿上層的塗層後,畫面上僅會留下下層的成果圖片,就達成了刮刮樂的目的。

透過以上的說明後,大家是否對刮刮樂的撰寫方式,有了方向呢?接下來為您帶來刮刮樂原始碼:

 

1.     首先宣告Class繼承View

 

 

2.     實作建構式:

 

 

3.     接著設定初始化方法:

 

 

4.     設定透明的畫筆:

4.1. 第二、三行為設置繪製出的圖形為抗鋸齒狀及防止圖形抖動,為美化繪製的作用

4.2. 第四行為設定繪製出的圖形為填滿繪製區域

4.3. 第五行為設定畫筆大小

4.4. 第六行為文章最開始所說的,設定圖形為混和模式,且繪製區域為透明

 

5. 設定紀錄手指滑過的路徑­­

    5.1. 第一到三行,為取得目前手指在螢幕上的XY座標

    5.2. 第六到十一行,為記錄手指按下螢幕的座標,並初始化路徑後,重新畫筆位置移動到該座標

    5.3. 第十二到十四行,忽略手指點下後移動的事件

    5.4. 第十五行,手指移開螢幕時,重新設定畫筆大小,並記錄移開手指時的座標

    5.5. 第二十行,重要的一點,當在onTouch事件裡,有更動畫面時,需要呼叫invalidate()方法,才可使畫面重繪

 

成果畫面如下圖:

 

結語:

了解Canvas之後,遇到專案上各種形形色色的各種UI,就不再擔心找不到SDK去解決各種需求,利用Canvas就可以讓開發者像是畫家一樣,自行刻畫出符合需求的畫面囉!

陳冠勳