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

繼續閱讀全文...

Android Wednesday Party @ 蛙咖啡

Android Wednesday Party on 12/16

與 上次 Google 辦公室的 Android Party 相隔了半年多，癮科技辦的 第三次 Android Wednesday Party 終於在 12/16 的晚上，在 Android 迷的期待下，揭開精彩的序幕。

當晚，應該來了有超過 40 人。儘管沒有上次 Google 場地的加持，不過我覺得這次的聚會還是超級的成功。因此，外面雖然是飄著細雨的寒夜，不過蛙咖啡裡面，卻是擠滿著 Android 愛好者的熱情。

除了延續上次精采的 Android 應用開發者分享外，這次還加了使用者體驗分享，及一些 Android 硬體的發表。其中的這台 Android Tablet，據說當晚，還是他首度在台灣亮相的日子。

底下就是當天有來分享的應用程式，紅色框起來的程式，就是入圍 2009 Google ADC 2 決賽的應用。

而我這次，就和 Spencer 一起分享這次參加 Google ADC 2 大賽的經驗，與入圍決賽的程式。

底下就是我這次的投影片。

如果我沒算錯的話，這次入圍 Google ADC 2 決賽的前 200 名參賽者，住在台灣地區的參賽者就有三位。我的 aPortaDrum，Spencer 的 FlingTap Done，還有 AtmWorker 的 AirPainter。當天我才知道，原來 AirPainter 的開發者，還曾經上過我的 Android 應用開發課程。哈，知道這消息，真的比我自己得獎還快樂。

這裡 有當晚的精彩照片與花絮報導

繼續閱讀全文...

幫圖片加上影像特效 (I) - 陰影特效

Create simple effects for your images (I) - Shadow Effect

Android 從 1.0 開始，他提供給開發者的各式繪圖函式，就比同時期其他手機平台來的強大與好用。

有 Android 基礎的你，應該都知道，在 Android 中繪圖，必須得要透過 Canvas 這個物件。在 Canvas 中，我最欣賞的功能就是，他讓開發者可以透過 matrix，來操作整個繪圖座標體系的位移、旋轉、傾斜等等功能。另外就是 Android 的 2D 繪圖功能，也開始支援 alpha，alpha 也就是透明度，這是要做一張美圖時，不可或缺的功能。

有了 matrix，加上 alpha，再配合比 bitmap 更為抽象的 drawable 物件，那你要將圖形做各式各樣的變形，甚至於將上影像的特效，都將會是輕而易舉的事。回想在 Windwos 3.1 的那個年代，要做到我要介紹的這些特效，那真的很辛苦，你必須要將影像中的像素，一個一個抓出來，再透過一些影像處理的演算法，才有辦法做到。

我就舉兩個影像特效例子，來說明這 Android 的繪圖功能有多強大。首先，我先介紹陰影特效要如何做。

在寫地圖程式時，通常會加個 Overlay 物件在地圖上，用來標示某個景點的所在位置。要在地圖上畫個 Overlay，Overlay 這個類別已經提供一個很好用的 drawAt() 函式給你。你只要負責給他一個沒有陰影的 Drawable，他會自動幫你製造出陰影的效果。結果就像最上面這張圖一樣，每個圖案標示，都有個陰影，這讓這些標示，看起來就像立在地圖上一般。

drawAt() 這個函式的宣告如下：

void drawAt(Canvas canvas, Drawable drawable, int x, int y, boolean shadow)

從實際的使用中，我們可以發現當你傳入 false 給 shadow 時，他就會幫你製造出陰影的效果。

這個函式，怎麼這麼神奇！今天我將幫你們翻出他的原始碼，讓我們來看看這個 drawAt() 是如何實現的。

底下就是 drawAt() 的原始碼。你看，短短不到 20 行，就可以幫任何的圖片做出陰影的效果。

protected static void drawAt(Canvas canvas, Drawable drawable, int x, int y, boolean shadow) { ... if (shadow) drawable.setColorFilter(0x7F000000, PorterDuff.Mode.SRC_IN); canvas.save(); canvas.translate(x, y); if (shadow) { canvas.skew(-0.9F, 0.0F); canvas.scale(1.0F, 0.5F); } drawable.draw(canvas); if (shadow) drawable.clearColorFilter(); canvas.restore(); }

為了幫助大家理解他是如何做到的，我將他整理成下面的程式範例。

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int nX = 100; int nY = 50; _DrawShadowImg(canvas, nX, nY); _DrawNormalImg(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 _DrawShadowImg(Canvas canvas, int nX, int nY) { canvas.save(Canvas.MATRIX_SAVE_FLAG); m_dw.setColorFilter(0x7f000000, PorterDuff.Mode.SRC_IN); canvas.translate(nX, nY); canvas.skew(-0.9F, 0.0F); canvas.scale(1.0F, 0.5F); m_dw.draw(canvas); m_dw.clearColorFilter(); canvas.restore(); }

_DrawShadowImg() 就是負責製造出陰影效果的函式。

這畫出陰影的函式，主要就是運用 matrix 與 drawable 的 color filter 這兩個功能。首先是 m_dw.setColorFilter()，將整個圖片的顏色都轉成半透明的黑色。接著 canvas.translate() 將座標體系原點移到 nX, nY 的位置，而 canvas.skew() 與 canvas.scale() 則是將座標體系做個 x 軸方向的傾斜，與 y 軸方向的大小壓縮。最後，呼叫 m_dw.draw() 將圖片畫上，陰影就這麼產生出來了。

底下這張圖，就是上面這個程式片段的執行結果。

下回，我將介紹要如何實現 iMac 上常見的鏡像特效。

繼續閱讀全文...