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

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

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

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

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

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

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

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

private void _Init() { m_paint = new Paint(Paint.ANTI_ALIAS_FLAG); LinearGradient lg = new LinearGradient( 0, 0, 0, m_nShadowH, 0xB0FFFFFF, 0x00000000, Shader.TileMode.CLAMP); m_paint.setShader(lg); m_paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY)); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int nX = 0; int nY = 20; _DrawNormalImg(canvas, nX, nY); _DrawMirror(canvas, nX, nY); } private void _DrawNormalImg(Canvas canvas, int nX, int nY) { canvas.save(Canvas.MATRIX_SAVE_FLAG); canvas.translate(nX, nY); m_dw.draw(canvas); canvas.restore(); } private void _DrawMirror(Canvas canvas, int nX, int nY) { int nW = m_dw.getIntrinsicWidth(); int nH = m_dw.getIntrinsicHeight(); /////////////////////////////////// //draw mirror image canvas.save(Canvas.MATRIX_SAVE_FLAG); canvas.scale(1.0f, -1.0f); canvas.translate(nX, -(nY + nH * 2)); canvas.clipRect(0, nH, nW, nH - m_nShadowH); m_dw.draw(canvas); canvas.restore(); ////////////////////////////// //draw mask canvas.save(); canvas.translate(nX, nY + nH); canvas.drawRect(0, 0, nW, m_nShadowH, m_paint); canvas.restore(); }

_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，透過上面這個程式範例，畫出來的樣子，就像下面這樣。是不是感覺這地球，放在一塊玻璃桌面上？