J2ME 圖片翻轉實作：水平與垂直鏡像效果完整教學

圖片翻轉本質上是依照特定規則重新排列像素點。水平翻轉處理每一欄，垂直翻轉處理每一列，是像素重排中最基礎的操作。本文提供完整可執行的 MIDlet 範例，將翻轉邏輯封裝為可重用方法，並示範如何在 Canvas 上繪製原圖、水平鏡像、垂直鏡像三種效果。

核心原理

• 水平翻轉 (左右鏡像)： 遍歷圖片寬度每一欄，將第 i 欄像素繪製到寬度 - i 位置。
• 垂直翻轉 (上下鏡像)： 遍歷圖片高度每一列，將第 i 列像素繪製到高度 - i 位置。

關鍵技巧：使用 Graphics.setClip() 限制繪製區域為單欄/單列，再配合 drawImage() 的座標偏移實現鏡像效果。

完整程式碼架構

範例包含兩個類別：

1. TestMIDlet - 應用程式進入點，初始化 Display 與自訂 Canvas
2. ImageConvertCanvas - 繼承 Canvas，負責載入圖片與實作翻轉繪製邏輯

TestMIDlet.java

package imageconvert;

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

public class TestMIDlet extends MIDlet {
    private Display display = null;
    private ImageConvertCanvas canvas = null;

    public void startApp() {
        display = Display.getDisplay(this);
        canvas = new ImageConvertCanvas();
        display.setCurrent(canvas);
    }

    public void pauseApp() { }

    public void destroyApp(boolean unconditional) { }
}

ImageConvertCanvas.java - 核心翻轉邏輯

package imageconvert;

import javax.microedition.lcdui.*;

public class ImageConvertCanvas extends Canvas {
    private Image img = null;

    public ImageConvertCanvas() {
        try {
            img = Image.createImage("/leaf.png");  // 載入專案資源圖片
        } catch (Exception e) { }
    }

    protected void paint(Graphics g) {
        int color = g.getColor();
        g.setColor(0xFFFFFF);
        g.fillRect(0, 0, getWidth(), getHeight());
        g.setColor(color);

        // 1. 繪製原圖
        g.drawImage(img, 0, 0, Graphics.LEFT | Graphics.TOP);

        // 2. 繪製水平翻轉 (原圖下方)
        hConvert(g, img, 0, img.getHeight() + 5);

        // 3. 繪製垂直翻轉 (水平翻轉下方)
        vConvert(g, img, 0, img.getHeight() * 2 + 10);
    }

    /** 水平翻轉：左右鏡像 */
    private void hConvert(Graphics g, Image img, int x, int y) {
        if (img == null) return;
        int w = img.getWidth();
        int h = img.getHeight();

        for (int i = 0; i < w; i++) {
            // 設定剪裁區域為第 i 欄 (寬度 1)
            g.setClip(x + i, y, 1, h);
            // 繪製時 X 座標鏡像偏移：x - w + 2*i
            g.drawImage(img, x - w + 2 * i, y, Graphics.LEFT | Graphics.TOP);
        }
    }

    /** 垂直翻轉：上下鏡像 */
    private void vConvert(Graphics g, Image img, int x, int y) {
        if (img == null) return;
        int w = img.getWidth();
        int h = img.getHeight();

        for (int i = 0; i < h; i++) {
            // 設定剪裁區域為第 i 列 (高度 1)
            g.setClip(x, y + i, w, 1);
            // 繪製時 Y 座標鏡像偏移：y - h + 2*i
            g.drawImage(img, x, y - h + 2 * i, Graphics.LEFT | Graphics.TOP);
        }
    }
}

執行效果展示

畫面由上而下依序顯示：原始圖片、水平翻轉結果、垂直翻轉結果。

關鍵技術細節解析

座標轉換數學原理

以水平翻轉為例，原圖寬度為 w，第 i 欄 (0-based) 對應鏡像位置為 w - 1 - i。程式中 drawImage 的 x 參數 x - w + 2*i 推導如下：

目標位置 = x + (w - 1 - i)
        = x + w - 1 - i
        = x - w + 2*i + (w - 1)  // 因為 setClip 從 x+i 開始，需補償
實際程式簡化為 x - w + 2*i (配合 setClip 起始位置)

同理垂直翻轉 Y 座標計算 y - h + 2*i。

setClip 與 drawImage 配合機制

• setClip(x+i, y, 1, h) 限制只繪製第 i 欄像素
• drawImage 以整張圖片為來源，但因剪裁區限制，只有目標欄位會被更新
• 透過調整 drawImage 的目標座標，將來源圖片對應欄位「移動」到鏡像位置

應用場景與擴展建議

• 遊戲角色面向切換 (左右移動時鏡像精靈圖)
• UI 元件狀態變化 (按鈕按下/釋放的鏡像效果)
• 相片編輯應用的基礎鏡像功能
• 可擴展為任意角度旋轉、縮放等仿射變換

註：本文核心內容參考自陳躍峰部落格，筆者對繪圖代碼進行修改優化，並提供完整 MIDlet 與圖片資源供直接執行測試。