J2ME移動2D圖形開發快速入門 – JAVA編程語言程序開發技術文章

緒論

  這篇文章將介紹可升級2D矢量圖形API(Scalable 2D Vector Graphics API),它是J2ME的一個可選包。這些API非常易於使用,它們可以用來渲染和轉換體積小和伸縮性好的二維(2D)圖形,這個可選包在Java社區進程(JCP)中以JSR-226開發。我將會給出API的總括,並且突出典型的用戶案例,使用代碼演示這些案例。

慨述

  JSR-226將渲染和重放矢量2D圖形引入到Java語言的移動應用中。由Nokia領導的專傢組,是由移動行業的主要廠商組成,他們都很有興趣將矢量多媒體內容引入到他們的設備中。在寫這篇文章時,這個規范剛剛被核準,大傢正在熱切期待著一個參考實現。

  矢量圖對移動開發者來說,有兩大好處:占用空間小和伸縮性好。考慮下面這個簡單的圖像:

一個簡單的示例圖像
圖1 一個簡單的示例圖像  

使用GIF格式,這個圖片的大小會達到7386字節。使用向量格式,大小僅僅為693字節,不到十分之一。這種減少是如何發生的呢?

  以光柵為基礎的圖像格式,像GIF,對組成圖像的矩形區域中的每一個像素的色彩內容進行編碼。而矢量圖,僅僅包含決定像素應該如何被著色的繪畫指令。一個圖像的向量表示法可以更大程度上進行壓縮,這對資源受限的移動設備是一個很大的有利因素。

  伸縮性好是另外一個重要的優點。矢量圖可以很清楚的進行變換,因為它們的繪畫指令是和分辨率無關的。圖2顯示前一張圖片進行等比例縮小、翻轉和旋轉後的圖像。

示例圖片的變換

圖2 示例圖片的變換

矢量圖的度量單位是任意的和相對的,它們可以被一些常量因子乘或除,以變換圖像從而適應特定設備的屏幕。通過對這個坐標系統使用簡單的數學操作,你可以創造出無限的效果,包括翻轉、旋轉、拉伸和扭曲。使用矢量圖像,應用程序開發者不再需要為圖像和圖標創建不同的集合,來支持不同的屏幕分辨率。

矢量圖的簡潔和伸縮性在動畫領域大放異彩。以光柵為基礎的動畫,像網頁中的GIF和MIDP遊戲中的精靈,在動畫的每一個幀中包含整個圖片都很費力。與之相比,以矢量為基礎的動畫僅僅包含一些指令,而這些指令規定瞭當需要改變動畫時的圖像哪些元素應該如何改變。如果矢量圖的大小比它們相對應的光柵圖小一個數量級,那麼矢量動畫的大小就比他們相對應的光柵動畫小兩個數量級,這使得它們成為在移動設備上變換和展示多媒體內容的理想選擇。

當以私有的Macromedia Flash播放器為基礎的矢量圖和矢量動畫變得流行時,可升級矢量圖形(Scalable Vector Graphics,SVG)文件格式以開放的標準和免費的專利權,成為業界的另外一個選擇。它由W3C標準化。SVG-Tiny提供瞭SVG全部功能的一個子集,適合在移動設備上使用。JSR-226采用SVG-Tiny的1.1版本作為J2ME矢量圖形的官方文件格式。W3C稱SVG-Tiny為一個“Profile”,但是為瞭避免和J2ME的Profile混淆,我稱之為“格式”。

SVG-Tiny標準也可以支持動畫。圖像文件內部的指令可以自己修改圖像元素的位置和屬性,來回應時鐘事件和用戶輸入。

為瞭更加復雜的交互,JSR-226引入瞭兼容microDOM的API,microDOM是SVG1.2完整的文檔對象模型(DOM)的一個子集。

SVG是一種可擴展標記語言(XML)格式,它使用一個公共的Schema充分的註釋和系統化。SVG-Tiny可能很小,但是它們仍然是SVG文件,仍然包含XML。下面是代表一個“brave world”圖像的完整的SVG-Tiny文件:

<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1 Tiny//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd”>
<svg preserveAspectRatio=”xMidYMid meet”
viewbox=”10 10 130 55″ width=”150.0″ height=”75.0″>
<rect x=”25″ y=”25″ transform=”translate(75 36.375)
rotate(15) translate(-70 -35.375)” fill=”#00007E”
width=”100″ height=”22.75″ stroke=”#000000″ stroke-width=”.5″/>
<rect x=”25″ y=”25″ fill=”#FF9800″ width=”108.5″
height=”22.75″ stroke=”#000000″ stroke-width=”.5″/>
<text x=”30″ y=”40″ fill=”#00007E” stroke=”#FFFFFF”
stroke-width=”.33″ xml:space=”preserve”>Hello brave world.</text>
</svg>

這個文檔聲明瞭兩個矩形和一些文字。第一個矩形繞它的中心旋轉15度,這一系列的轉換都包含在rect標記的轉換屬性中。第二個矩形在第一個之上繪制,然後文本在第二個矩形之上繪制。

即時未經修飾的文本不是一個特別的簡潔格式,這個文檔仍舊比一個壓縮的光柵圖像小的多,並且易於人工導入。因為XML文本可以充分地壓縮,所以SVG在應用程序的JAR文件中就占用相對較少的空間。JSR-226要求支持SVG文檔的實現使用gzip格式壓縮。後綴名.svgz表示gzip壓縮的文檔。

Mobile 2D API

JSR-226的一個主要的目的就是定義移動2D圖形(Mobile 2D Graphics,M2G)API,這個API是一小組和SVG-Tiny格式功能結合很緊密的類。它沒有被規定為普通的2D圖形繪制工具箱,就像J2SE的Graphics2D類提供的那樣。M2G API很清楚地定位於播放和在運行期操縱SVG內容。

M2G由高級類和低級類組成,高級類用來創建和渲染矢量圖形,而低級類負責以DOM樹的部分來操縱一個矢量圖形的XML成分。矢量圖形是ScalableImage的實例,你可以通過這個的靜態createImage()方法獲得它們。你使用ScalableGraphics的一個實例將ScalableImages繪制到一個MIDP圖形上下文中。SVGImage是ScalableImage的一個子類,它提供事件處理和底層DOM文檔訪問之間的聯系。

為瞭使渲染動畫SVG內容的普通情況更加方便,這個API提供瞭SVGAnimator類。對MIDP應用程序,SVGAnimator創建和控制一個Canvas對象,這個對象自動處理屏幕更新,以回應動畫事件和對這個圖像的計劃性的修改。SVGAnimator提供一個類似播放器接口來控制動畫的播放。

這些類都定義在javax.miroedition.m2g和org.w3c.dom.svg包中,在表1中進行瞭總結,並且在JSR-226規范中也作瞭充分的註釋。SVG DOM是在標準的org.w3c.domorg.w3c.dom.events包中定義DOM類和接口的擴展。

Class或Interface 描述
javax.microediton.m2g
ScalableGraphics 2D渲染的基礎類
SVGAnimator 這個類對一個目標用戶接口組件,處理SVGImage的更新和動畫的自動渲染
SVGEventListener 這個接口用來處理一個應用程序的平臺相關事件
SVGImage 這個類代表符合W3C SVG Tiny1.1 Profile的SVG圖像
ExternalResourceHandler 這個接口用來同步加載裝入SVG內容所需要的外部資源
org.w3c.dom.svg
SVGAnimatorElement 這個接口代表一個動畫元素,包含控制動畫時間的方法
SVGElement 這個接口代表文檔樹中一個SVG元素
SVGLocatableElement 這個接口代表一個可繪制的SVG元素,典型的有形狀、圖像或者文本
SVGMatrix 這個接口代表一個SVG matrix數據類型,由一個仿射矩陣定義,等價於一個平移的線性變換
SVGPath 這個接口代表一個SVG path數據類型,用來定義幾何路徑
SVGPoint 這個接口代表一個SVG point數據類型,由它的x和y標示
SVGRect 這個接口代表SVG rectangle數據類型,由最小X、最小Y、寬度和高度組成
SVGRGBColor 這個接口代表SVG RGB color數據類型,由紅、綠、藍組成
SVGSVGElement 這個接口代表在SVG文檔樹中的一個元素


創建M2G應用程序

  為瞭創建一個M2G應用程序,你需要可以工作的JSR-226實現。在寫這篇文章時,這個規范才剛剛被定案;沒有設備實現它,並且沒有官方的參考實現可用。你可以下載一個有限的、實現的實現,作為mpowerplayer開發者工具箱的附加包。

  你還需要一些SVG-Tiny內容。這篇文章是用上面的“brave world”圖像,但是更多的SVG-Tiny示例可以從移動開發工具制造者TinyLine上獲得。你也可以使用一個商用Java應用程序創建自己的內容,這個應用程序被稱為Sketsa,它可以像一個插圖工具一樣工作,並且使用SVG作為它的文件格式。

  隻有很少的方法用來將你的SVG內容繪制到屏幕上。最簡單的是為你的圖像創建一個SVGAnimator,然後把它C

發佈留言