2009年12月29日 星期二

幫圖片加上影像特效 (II) - 鏡像特效

Create simple effects for your images (II) - Reflection Effect

上次介紹過如何實現陰影特效,這次我將介紹如何實現 iMac 上常見的鏡像特效。

鏡像特效最近還蠻流行的,尤其在 HTC 的 Sense 介面上,常常都可以見到。最上面的那張圖,就是來自 HTC Sense 介面,所自帶瀏覽器程式中的『我的最愛』截圖。看到沒,加了個鏡像特效後,那感覺就很立體,感覺上好像是這些圖片擺立在一個玻璃桌面上。

我想你一定想知道,在 Android 上要幫圖片加上鏡像特效,會不會很麻煩?我告訴你,一點也不麻煩。和陰影特效相似,同樣地,只要幾行程式,就可以搞定。

因此,在開始看答案之前,我會建議你要先有 Photoshop 的使用經驗。想想,如果用 Photoshop 要幫圖片加上鏡像特效,要如何做?我想一般不外乎是先複製個圖片,並將其垂直翻轉,接著再對這翻轉的圖片,加個由灰到黑的漸層 mask 即可。

如果你沒 Photoshop 的使用經驗,自己上網找一下,應該不難找到說明,像 ,還有 都有。

好了,讓我們來看一下答案。底下就是幫圖片加上鏡像特效的程式範例。

_DrawMirror() 函式是關鍵。還記得我剛剛說,用 Photoshop 要如何做出鏡像特效?第一步是先畫出垂直翻轉的圖片。

Android 繪圖座標體系預設的原點在左上角,X 軸往右是越來越大的正值,而 Y 軸往下,則是越來越大的正值。要畫出垂直翻轉的圖片,其實也就是要垂直翻轉整個繪圖座標體系。在 Android 中,要如何做?答案就是 canvas.scale(1.0f, -1.0f)。很簡單吧,沒想到給 scale() 函式一個負值,就可以翻轉相對應的軸。

在 Photoshop 中,做鏡像特效的第二步是要對這翻轉的圖片,加個由灰到黑的漸層 mask。

在 Android 中,要畫漸層色,那就一定得用 LinearGradient 這個類別。至於要對背景圖加上個 mask,就請參考一下 Paint 的 setXfermode() 函式。_Init() 這個函式,就是負責生成一個由灰到黑漸層 mask 的 m_paint 物件。

將一個地球的圖片設給 m_dw,透過上面這個程式範例,畫出來的樣子,就像下面這樣。是不是感覺這地球,放在一塊玻璃桌面上?

4 則留言:

yrulee 提到...

Useful sample code, thanks :)

匿名 提到...

你好, 我想要在gallery加上鏡像特效, 使用老師你的方法會發現,鏡像在gallery捲動過程中一直閃爍,請問該怎麼解決呢? 謝謝!

samlu 提到...

先預先產生好鏡像的bitmap就不會有閃了。

匿名 提到...

老師你好!我想要詢問一個問題
目前我想要做出兩個立方體,一個大一個小。然後當小的擋住的部分大的不會畫出來。但是目前我們是用stencil來實作,但是當我們camara轉動時,側面的某些殘影卻還是會跑出來。不知道這樣子的問題該如何解決呢?謝謝

張貼留言