基於 J2ME 的 SVGT 移動應用開發（一）：矢量圖形優勢、Mobile SVG 標準與 JSR-226 實戰

為何選擇矢量圖形？

相較於位圖（JPG、PNG），矢量圖形（SVG）在移動裝置具備決定性優勢：

• 無損縮放：任意解析度下保持銳利，適應手機螢幕尺寸碎片化。
• 檔案體積小：幾何描述遠小於像素矩陣，縮短無線下載時間、節省頻寬。
• 客戶端交互：平移、縮放、旋轉、點擊熱區皆在本地即時運算，無需向伺服器請求新圖。
• 資料綁定：元素可攜帶元資料（如房產圖的面積、價格），支援資訊查詢與搜尋。
• 動畫原生支援：SMIL 動畫標準內建，無需逐幀位圖序列。

Mobile SVG：SVG Tiny (SVGT) 與 SVG Basic (SVGB)

W3C 針對資源受限裝置制定兩個子集：

SVGT 移除：透明度、漸層、裁剪路徑、圖案、符號、蒙版、腳本。檔案通常以 .svg 或壓縮後的 .svgz 發行。

SVGT 範例（載入進度條與旋轉動畫）

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="https://www.w3.org/2000/svg"
     xmlns:xlink="https://www.w3.org/1999/xlink"
     id="root" width="100%" height="100%"
     viewBox="0 0 240 320"
     preserveAspectRatio="none">
  <rect fill="#35556B" width="240" height="320"/>
  <g id="processingIndicator" transform="translate(120,97) scale(0.5)">
    <g id="processingIndicator.outerCircle">
      <path fill="#C1CBD1" d="M73.426,97.169c0,25.681,20.894,46.575,46.575,46.575..."/>
    </g>
    <g id="processingIndicator.innerCircle">
      <path fill="#738999" d="M120.001,69.772c-5.441,0-10.701,1.592..."/>
    </g>
    <g id="processingIndicator.center">
      <circle fill="white" cx="120" cy="97.169" r="9.349"/>
    </g>
  </g>
  <defs>
    <animateTransform xlink:href="#processingIndicator.innerCircle"
        attributeName="transform" type="rotate" values="0;360"
        begin="0s" dur="3s" repeatDur="indefinite"/>
    <animateTransform xlink:href="#processingIndicator.outerCircle"
        attributeName="transform" type="rotate" values="0;-360"
        begin="0s" dur="2s" repeatDur="indefinite"/>
  </defs>
  <g id="loadProgressBar">
    <rect id="loadProgressBar.bkg" fill="#A3B8CB" x="45" y="250" width="150" height="10"/>
    <rect id="loadProgressBar.progress" fill="white" x="45" y="250" width="20" height="10"/>
    <text transform="translate(120,230)" fill="#BDBEC0" font-size="12" text-anchor="middle">loading application</text>
    <text id="loadProgressBar.text" text-anchor="middle" transform="translate(120,275)" fill="#FFFFFF" font-size="12">0%</text>
  </g>
</svg>

J2ME 平台與擴展規範（JSR）

• CLDC/MIDP：基礎配置與設備描述檔，MIDP 2.0 增加遊戲 API、音訊、HTTPS。
• JSR-226 (M2G)：Scalable 2D Vector Graphics API，核心類 SVGImage、ScalableGraphics、SVGAnimator。
• JSR-172：J2ME Web Services，提供輕量級 SAX/DOM XML 解析器（javax.xml.parsers）。

MIDlet 生命週期速覽

public class Hello extends MIDlet {
    private Display display;
    public Hello() { display = Display.getDisplay(this); }
    protected void startApp() {
        Form f = new Form("Test"); f.append("hello world!");
        display.setCurrent(f);
    }
    protected void pauseApp() {}
    protected void destroyApp(boolean unconditional) {}
}

四階段：載入 → startApp()（啟動） → pauseApp()（暫停） → destroyApp()（銷毀）。

JSR-226 核心用法

1. 載入 SVGT 檔案並渲染

try {
    InputStream is = getClass().getResourceAsStream("/loadScreen.svg");
    SVGImage svgImage = (SVGImage) SVGImage.createImage(is, null);
    ScalableGraphics sg = ScalableGraphics.createInstance();
    // 在 Canvas.paint() 中
    public void paint(Graphics g) {
        g.setColor(0xFFFFFF); g.fillRect(0,0,getWidth(),getHeight());
        sg.bindTarget(g);
        sg.setTransparency(1f);
        svgImage.setViewportWidth(getWidth());
        svgImage.setViewportHeight(getHeight());
        sg.render(0, 0, svgImage);
        sg.releaseTarget();
    }
} catch (Exception e) { e.printStackTrace(); }

2. 使用 SVGAnimator 自動播放動畫

try {
    InputStream is = getClass().getResourceAsStream("/Halloween.svg");
    SVGImage svgImage = (SVGImage) SVGImage.createImage(is, null);
    SVGAnimator animator = SVGAnimator.createAnimator(svgImage);
    animator.setTimeIncrement(0.01f); // 100 fps 精度
    Canvas svgCanvas = (Canvas) animator.getTargetComponent();
    svgImage.setViewportWidth(svgCanvas.getWidth());
    svgImage.setViewportHeight(svgCanvas.getHeight());
    svgCanvas.setCommandListener(this);
    animator.setSVGEventListener(this); // 處理動畫事件
    animator.play();
    Display.getDisplay(this).setCurrent(svgCanvas);
} catch (Exception e) { e.printStackTrace(); }

3. 動態建立 SVG 內容（DOM 操作）

SVGImage svgImage = SVGImage.createEmptyImage(null);
Document doc = svgImage.getDocument();
SVGSVGElement svg = (SVGSVGElement) doc.getDocumentElement();
SVGElement textEl = (SVGElement) doc.createElementNS("https://www.w3.org/2000/svg", "text");
textEl.setTrait("#text", "Hello JSR-226 !");
textEl.setFloatTrait("x", 50f);
textEl.setFloatTrait("y", 50f);
SVGRGBColor color = svg.createSVGRGBColor(0,0,0);
textEl.setRGBColorTrait("stroke", color);
svg.appendChild(textEl);
// 繪製同上，使用 ScalableGraphics.render()

套件結構

• javax.microedition.m2g：M2G 核心 API（SVGImage, ScalableGraphics, SVGAnimator...）
• org.w3c.dom.svg：SVG DOM 介面（SVGElement, SVGSVGElement, SVGRGBColor...）
• org.w3c.dom、org.w3c.dom.events：標準 DOM 事件模型