J2ME 雙緩衝技術徹底解析：解決畫面閃爍的關鍵模式

閃爍成因與雙緩衝原理

在 Canvas.paint(Graphics g) 中直接繪製複雜圖形 (多層矩形、文字、圖片疊加) 時，螢幕會逐步顯示繪製過程，造成肉眼可見的閃爍。雙緩衝核心思想：

1. 建立一個離屏 Image (大小等於螢幕)。
2. 所有繪圖操作導向該 Image 的 Graphics。
3. 繪製完成後，一次性 drawImage(offscreen, 0, 0) 複製到螢幕 Graphics。

因螢幕只經歷「空白 → 完整畫面」單一更新，閃爍消失。

平台原生支援檢測

現代手機 (Nokia S40/S60, Sony Ericsson JP-8 等) 多數硬體/驅動層已實作雙緩衝。優先檢測：

if (isDoubleBuffered()) {
    // 直接在 paint(g) 繪製，系統自動處理離屏合成
} else {
    // 需自行實作軟體雙緩衝
}

自行實作軟體雙緩衝範本

public class DoubleBufferCanvas extends Canvas implements CommandListener {
    private Image offscreen;      // 離屏緩衝區
    private int width, height;
    private Command exitCmd = new Command("退出", Command.EXIT, 1);

    public DoubleBufferCanvas() {
        width = getWidth();
        height = getHeight();
        setCommandListener(this);
        addCommand(exitCmd);

        // 僅在系統不支援時建立離屏緩衝區
        if (!isDoubleBuffered()) {
            offscreen = Image.createImage(width, height);
        }
    }

    protected void paint(Graphics g) {
        // 1. 取得實際繪圖目標
        Graphics target = g;
        if (offscreen != null) {
            target = offscreen.getGraphics();
        }

        // 2. 在目標上進行所有繪圖 (複雜邏輯放這裡)
        drawComplexScene(target);

        // 3. 若使用離屏緩衝，一次性複製到螢幕
        if (offscreen != null) {
            g.drawImage(offscreen, 0, 0, Graphics.TOP | Graphics.LEFT);
        }
    }

    private void drawComplexScene(Graphics g) {
        // 範例：繪製巢狀矩形 + 狀態文字
        g.setColor(0xFF8080); // 淺紅
        for (int i = 2, j = 2; i < width/2 - 6 && j < height/2 - 6; i += 2, j += 2) {
            g.drawRect(i, j, width - 2*i, height - 2*j);
        }
        g.setColor(0x000000);
        g.drawString("DoubleBuffered: " + isDoubleBuffered(), width/2, height/2, Graphics.HCENTER | Graphics.TOP);
    }

    public void commandAction(Command c, Displayable d) {
        if (c == exitCmd) {
            // 通知 MIDlet 退出...
        }
    }
}

完整對比測試 MIDlet

以下程式碼可在不支援硬體雙緩衝的舊機型 (如 Nokia 6100, Siemens S55) 上直觀觀察差異：

架構圖

DoubleBufferMIDlet (MIDlet)
    └─ UIController (導航控制器)
         ├─ MainListUI (選單：非雙緩衝 / 雙緩衝)
         ├─ NonDoubleCanvas (無離屏緩衝)
         └─ DoubleCanvas (含離屏緩衝)

關鍵類別實作

// NonDoubleCanvas: 直接在螢幕 Graphics 繪製
public class NonDoubleCanvas extends Canvas implements CommandListener {
    private UIController ctrl;
    public NonDoubleCanvas(UIController ctrl) { this.ctrl = ctrl; addCommand(UIController.BACK_CMD); setCommandListener(this); }
    protected void paint(Graphics g) {
        g.setColor(0x646464);
        for (int i=2,j=2; i