矢量图形技术的应用.doc

矢量图形技术在移动电话上的发展现况随着多媒体手机的应用发展越来越多元化，除了可用来当作照相机、随身听、游戏机之外，越来越多的应用也如雨后春笋般地被开发出来；在2D视觉化的相关应用上，一般呈现的方式上仍以点阵图(Bitmap)居多。然而，受限于萤幕尺寸大小的关係，当使用者进行缩放的动作后，往往会造成显像失真的问题。有鑑于此，本文将向各位读者介绍“矢量图形(vector graphics)”在这一方面所展现出的特性及目前技术发展的阶段成果与运用的情况，包括现行一些重要的规格与相关软硬体发展现况和趋势，以及矢量图形技术在多媒体手机平台上的应用，让读者可以对此领域有深入的了解。另外，本文所探讨的2D矢量图形技术之应用将以高阶多媒体行动电话的平台为主，常见的如SmartPhone、Symbian等。 2D矢量图形的展现和体验相信读者对于目前个人电脑上的主流媒体格式PDF和Flash应该都不陌生，他们都是2D矢量绘图的应用，分别是由Adobe和Macromedia这两家公司所制订，前者几乎已成电子文件代名词，而后者则在动画领域独领风骚。现今使用2D矢量图形技术来开发动画的档案格式，除了耳熟能详的Flash之外，尚有由World Wide Web Consortium (W3C) 推行的SVG (Scalable Vector Graphics)，此规格是一种采用XML-based格式的网页矢量图形及动画播放标准。Flash和SVG在2D矢量图形的展现有许多的相似之处，两者除了都被视为是矢量图形及动画的标准格式外，尚包括具有可任意放大缩小而不失真的特性、支援任意曲线、直线、规则曲线、标准图案（如：方形、圆形等），并且可以嵌入点阵影像档和文字、以及配合描述语言(scripting)可以做动态画面等。然而，由于制订发展的过程和时间不同，在特性上及多媒体内容的支援上，不免也出现了些许的差异。举例来说，SVG是由业界代表组成的委员会所制定及管理的，格式标准是开放的，因此可以由任何厂商，在任意时间下，实作在任何核可的工具及浏览器上；反之Flash算是封闭规格属于macromedia公司所有，并且与其他规格不完全相容，未来性较不被看好。其次是SVG完全支援XML规格，所以可像HTML一样检视其原始档，这种采用ASCII格式的档案优势在于资料搜索时，容易被浏览器、搜索引擎或其他具有文字搜索功能的软体读取。反观，采用二进位格式的Flash档案在资料搜索方面就显得比较施展不开。不过，在档案的大小上就比以文字撰写成的SVG来得精简，因此较利于网路传输。整体来说，由于SVG推出的时机较晚，因此在知名度、市佔率，甚至成熟度等方面的成就，平心而论，现阶段是不及Macromedia Flash表现来得优异。时至今日，随着高阶多媒体手机已成为时下数位领域中最热门的电子产品，Flash和SVG的硬战事实上也早已蔓延至行动平台的战场上。在这类手机上普遍用来展现2D矢量图形技术或播放矢量动画的规格，即是由Flash化身的Flash Lite及SVG的缩小版Mobile SVG。Flash Lite是根据记忆体、处理器速度及显示萤幕有限制的行动电话之计算、展现能力所设计的；而Mobile SVG则以符合行动电话硬体限制的需求为前提，精简SVG 1.0的规格后所制订的。以下分别介绍Mobile SVG和Flash Lite相关的发展和现况： Mobile SVG依据展现平台硬体规格及运算能力的差异，Mobile SVG可分为SVG-B(Basic)及SVG-T(Tiny)两种不同的profiles。以相容性角度来看待这些不同的profiles，SVG-T可说是SVG-B的子集合，而SVG-B又是SVG 1.1的子集合。SVG-B主要的目的在于运算能力较强的高阶行动装置上（例如PDA）提供矢量绘图的能力，但对于filters及clip paths功能的支援有限。SVG-T则是应用在低阶的行动电话上，非但没有filters及clip paths的功能，也移除了对scripting、gradients、patterns及opacity的支援。图一的2D矢量图形即是依据Mobile SVG-T profile所开发出来的动画效果。图1 使用TinyLine开发的SVG viewer所展现的矢量图形(SVG-Tiny)由于Mobile SVG是一开放式的标准，不必依赖供应商的2D矢量图形格式，具有平台独立性。因此近来已被3GPP所采纳，用于多媒体讯息服务(MMS)。如此一来，Mobile SVG将使许多2.5G和3G MMS服务得以实现，并带动Mobile SVG的普及。BitFlash这家公司研发的Mobile SVG播放器，整合了SVG-T和SVG-B规格所需的技术，提供在行动电话上观看Mobile SVG格式的矢量图形内容；并更进一步和TI携手合作，使得BitFlash Mobile SVG播放软体已成为OMAP平台的标准软体配备之一，让消费者使用记忆体有限的行动装置时，能享受更丰富的多媒体服务，例如卡通、电子贺卡、电子邮件、甚至动画显示。至于Ikivo这家公司也提供有多媒体SVG播放器，支援的标准为SVG-T 1.2 和1.1，并有音效(Audio)和影片(Video)播放的功能。除此之外，Hybrid这家公司也发展了可展现SVG-T、SVG-B profiles的矢量绘图引擎，并提供开发应用产品的服务。目前市面上支援SVG格式的编辑工具，较具名气的有Adobe Illustrator及Corel DRAW等软体，不过使用此类矢量绘图软体的美工人员，大部分似乎已习惯Macromedia Flash编辑环境的设计介面，因此较不获得使用者的青睞。过去，Adobe极力推广SVG的规格，目的就是希望能与Macromedia Flash相抗衡；最后仍因缺乏成熟的编辑设计工具与亲和友善的设计介面，严重影响了SVG格式的发展。但在今年(2005) Adobe以34亿美元收购Macromedia之后，笔者认为Adobe将在Flash格式中注入SVG的特性，创造两者的双赢局面。目前市场上有支援Mobile SVG 的手机有Nokia 7650、Motorola T720、Sony Ericsson T68i、Sony Ericsson K700i、Sony Ericsson S700i等系列的手机。但是由于在行动电话市场上，依据Mobile SVG profiles所开发出来的2D矢量图形内容并不多，呈现的效果也不如Flash精緻，因此SVG矢量动画并不普及。Flash Lite由于Flash动画采用的SWF档案格式，当初是针对个人电脑(PC)设计的，因此对于支援SWF的播放器而言，若希望能够在运算能力有限的高阶多媒体手机上顺畅地播放Flash动画，则必须针对动画内容有所限制，并重新规范SWF档案格式。于是，我们就不难想像Flash Lite存在的理由了。说穿了，主要的目的就是剔除一些现阶段手机暂时无法或者不需要展现的效果，包括不能使用手机上不支援的字体，不要使用透明混色效果以及减少复杂的渐变动画效果等限制性的动画内容。一般来说，从事2D矢量图形的设计者与程式开发者，皆可透过Macromedia Flash MX Professional 2004提供的编辑环境与使用者介面，创作出跨平台的动画内容，让消费者能在不同的手机上体验到Flash最具震撼的互动性，以及令人耳目一新的动画效果。由于Macromedia Flash具有完整的编辑工具，非常方便使用者制作多样化的内容，因此使用者甚至可透过工具，进一步发挥个性化的创意，在行动电话上编辑适合互动的使用者介面（参见图二）。目前，国内仁宝公司已与Macromedia签订软体授权协议，即是欲藉由Flash Lite的功能性和便利性，开发手机介面的应用程序。图2 动态的Flash Lite使用者介面由Macromedia 推出的Flash Lite 1.1互动式多媒体绘制引擎，不但成功地在多款多媒体手机上展现 Flash Lite矢量图形的内容和动画外，同时也支援了SVG-T profile的播放。此引擎透过双重支援的设计，在同一终端上便不再需要两个独立的矢量绘图引擎(Vector Graphics Rendering Engine)，如此可有效降低整体程式码的大小以及绘制引擎的维护工作。目前提供播放Flash Lite 动画功能的行动电话包括Nokia 7610、Nokia 6600、Nokia 9210、Siemens SX1、Sony Ericsson P800、Sony Ericsson P900、Motorola A920、Samsung SCG-S260以及NTT DoCoMo 505i、505is、506i、900i等系列的手机，而Sony Ericsson Z800i更是直接内建Flash Lite播放器。 台湾数位电视现况跨平台2D矢量图形应用程式开发介面 OpenVG在过去，由于嵌入式系统上并没有绘制2D矢量图形的统一规格，因此在创作2D矢量图形的相关内容时，各家业者（如：Adobe、Macromedia）都会开发自己专属的2D API来进行底层的绘制（参见图三）。这样的作法必须仰赖CPU进行大量的运算，对电力的消耗是一大考验；再者，当开发者欲移植到不同的平台时，可能又得多花一份力气。有鉴于此，2004年第四季，Khronos组织首先提出适合于硬体加速(hardware-accelerated)的2D矢量图形处理标准函式库OpenVG（参见图四）。目前OpenVG规格由Khronos组织所主导，结合多家行动装置大厂及图学组织，包括Nokia、Motorola、Bitboys、Hybrid Graphics、Symbian、Sun Microsystems、3Dlabs等公司，目标在于规范适合嵌入式系统上简单、轻便且低阶的2D矢量图形绘图引擎之功能。藉由公开、标准、统一的规格，不但硬体制造商可依据其规格设计出2D矢量图形硬体加速器，同时也能加快2D矢量图形展现技术与硬体加速器垂直整合的速度。说穿了，OpenVG的目的就是在提供硬体抽象层，达到跨平台的功能，使得使用OpenVG APIs开发的应用程式，在不同平台执行时，皆可取得2D矢量图形硬体加速的功能。 根据规格的定义 ， OpenVG 可分为 Core API 和 Optional VGU utility library 两大模组；其划分的准则主要是跟硬体加速的需求有关。 Core API 模组中定义了需要藉由硬体加速支援的基本功能，而那些暂时被认定为不需要由硬体加速，或可由 Core API 模组复合而成的功能，则在 optional VGU utility library 模组中定义 。 Core API 模组主要提供 2D Vector Graphics 处理与绘图的核心功能，除了 OpenVG 绘制流程 (rendering pipeline) 各阶段的功能外，还包括 Coordinate Systems and Transformations (Image drawing uses a 3x3 perspective transformation matrix) 、 Paths 、 Images 、 Image Filters 、 Paint (gradient and pattern) 及 Blending and Masking 等功能项目。 Optional VGU utility library 模组主要是以辅助并扩充 Core API 矢量图形处理的功能，其内容包含 Higher-level Geometric Primitives 和 Image Warping 等功能项目。以下将简述各模组中的细项功能：Core API模组座标系统转换功能项目：提供 User 座标系统转换到以像素为单位的 Surface 座标系统之相关设定及转换。路径绘制功能项目：提供描述几何物件(geometry)的功能。一般来说，显像图形的形状都是由Paths定义，一个Path或多个Paths可构成几何物件，而 Paths亦是由一连串的线段所组成的。线段可选择由直线线段(a straight line segment)、二次或三次贝式曲线(a quadratic or cubic Bezier curve)或椭圆形弧线(an elliptical arc)定义之。 影像绘制功能项目：提供影像相关制作及处理的功能。 影像过滤功能项目：提供影像过滤处理的功能。 像素著色功能项目：提供像素著色时的顏色及型态。 混合及遮罩处理功能项目：提供像素混色及遮罩处理的功能Optional VGU utility library模组 高阶几何元件功能项目：提供应用程式设定高阶几何元件的功能。影像变形绘制功能项目：提供影像变形转换处理的功能。资策会网多所已于 2004 年投入于嵌入式行动装置上 Flash 播放器的开发工作，并获得部分成果（参见图五）。而目前则是依据 Khronos 组织于 2005 年第二季所公布的 OpenVG 1.0 Final Draft Specification ，著手开发符合 OpenVG 规范的“矢量式图学函式库”，目标在建立一套可于嵌入式系统上绘制 2D 矢量图形的函式库。透过此标准界面，使用者即可利用硬体加速的功能，迅速在嵌入式系统上建立互动式的应用程式。而 Hybrid 这家公司则 将 在 OpenVG 的正式版公开后，进行 OpenVG 矢量绘图引擎的开发。 行动平台上高阶的矢量绘图标准 JSR226 J2ME是Java 2技术架构内三大重要分支之一，其目的在提供诸如手机、PDA等消费性电子产品或嵌入式系统开发应用程式的平台。简单来说，只要手机厂商在其作业平台上提供可以执行J2ME的JAVA虚拟机器(KVM)，则利用J2ME所开发出来的应用程式便能在该手机上直接执行。J2ME最主要的用意是希望能把手机厂商与软体厂商连结起来，弥补在消费性电子产品或嵌入式系统上开发应用程式的缺口。由于现阶段手机大厂皆采纳了J2ME平台，包括Nokia、Motorola、Sony Ericsson与Siemens等，因此在支援J2ME平台的手机逐渐普及之下，软体厂商也顺理成章的提高了在手机上开发应用程式的意愿。有鑑于此，负责制订Java Profile规格的JCP组织，也于2004年公布了一个可于行动平台上绘制2D矢量图形功能的套件(Package)Scalable 2D Vector Graphics API。因其JSR(Java Specification Request)标号订为226，故我们JSR 226称之。JSR 226是由Nokia这家手机大厂主导制订的，其它的专家群(Expert Group)成员包括SonyEricsson、Motorola、Siemens、Sun Microsystems、TinyLine、IBM、Texas Instruments、Symbian等等。在J2ME开发环境上，JSR 226规格定义了可缩放2D矢量图形的应用程式介面，并且必须支援SVG Tiny Profile，并相容于SVG-T 1.1。其执行平台和OpenVG相差不多，皆适用于记忆体容量、萤幕大小及计算效能有限的行动装置上。但有别于OpenVG规格的是，JSR 226是一套较为高阶的矢量绘图标准。此规格提供了可用来绘制Scalable 2D vector images的API套件，其中包含了SVG 格式的影像档。由于JSR 226必须支援SVG Tiny Profile特性的关係，JSR 226应该具备具有延伸机制的能力。随着SVG profiles未来可能的发展，才能达到完全支援的效果。此外，JSR 226若能透过OpenVG函式库来加以实作，并且充分利用矢量图形硬体加速的功能，对于JSR 226效能的展现绝对有正面的助益。最后说明JSR 226这套程式介面的应用，主要项目包括地图视觉化、可缩放的图示(icon)、及其他必须符合自由缩放需求的进阶应用。附带一提，Hybrid这家公司目前已经开始准备发展JSR 226标准规格的相关工作了。 OpenVG 在硬体加速方面的发展现况在此领域中， BitBoys 这家公司是目前投入开发适合于嵌入式系统行动装置的“ 2D 矢量绘图处理器 (2D vector graphics processor) ”最热衷的厂商。该公司于 2005 年 4 月发布 G12 矢量绘图处理器 的规格 ， G12 同时支援了 SVG Tiny 1.2 及 OpenVG 1.0 的标准。其特色在于体积小、符合低耗能需求可达到长时间使用之目的，并且针对多媒体整合功能设计之整合型单晶片 (SoC) 。 BitBoys 号称这颗 G12 矢量绘图处理器 的效能每秒可以达到 60 个以上的画格，并预计能在 2005 年第三季上市，届时有兴趣的消费者便可亲自体验 G12 在 行动装置上所带 来的 2D 矢量绘图处理能力。 2D矢量图形技术在行动电话上的相关应用由于 2D 矢量图形具有可自由缩放 (scalable) 以及反锯齿 (anti-aliasing) 处理能力的特性，因此 2D 矢量图形的技术非常适合用于浏览设备 (navigation equipment) 、 MP3 播放器、以及行动电话这类小尺寸萤幕的行动装置上，以克服不同行动装置因萤幕大小不同而造成画面比例不佳的问题。换言之，透过这样的技术，当我们在小尺寸萤幕上显示由 2D 矢量图形的技术所产生的内容时，其绘制出来的品质将会是非常的清晰，失真的问题也可以获得有效改善。此外，由于嵌入式行动装置本身的资源限制，如：萤幕太小、记忆体频宽不足、资料传输效能不佳等因素，笔者认为使用 2D 矢量图形以取代点阵图，开发相关的应用或提供相关的服务是很合适的作法，例如具教育及娱乐功能的电子书阅读、个人化手持式装置、以及使用者介面的设计。以下将简介一些可以使用 2D 矢量图形来发展的相关应用： 电子贺卡：使用 2D 矢量图形来制作动画，不但可以增加贺卡的互动效果，而且可以减少因使用点阵图所增加的档案大小。电子地图动态显示：使用2D矢量图形来制作电子地图是非常合适的应用，因为在小尺寸萤幕的行动电话上，对矢量图进行缩放后，可以有效控制失真的问题。图书馆或博物馆行动导览服务系统：方便阅览者使用2D矢量图形开发的导览系统来取得馆内的相关资讯。电子书籍阅读器的开发应用：使用2D矢量图形技术来制作字型时，由于具备高品质反锯齿的特性，因此在阅读文字时，在放大字体后仍保持阅读品质。游戏开发：可提供2D或3D游戏，制作贴图或背景图片等内容。人机介面的设计：2D矢量图形用来设计可自由缩放的使用者介面，加上采用scripting设计多采多姿的动画效果，便可提供使用者独特的视觉享受，且在不同解析度的萤幕上仍能保持一致性。制作手机萤幕的桌布或是萤幕保护，以及来电大头贴等。 结语随着数位行动的时代来临，大眾对行动电话的需求与日俱增，在行动平台上，更活泼且多元的 2D 数位内容将随之而起。从目前的情况看来， Macromedia Flash Lite 能提供 让开发人员建立于行动装置的丰富内容，并让公司将其网站的外观和感觉延伸至行动电话的网站，以建立一贯的品牌形象。因此 Flash Lite 在 行动电话上的发展，是有可能如同 Flash 在 PC 平台上的角色，让 行动网路到处充满了 Flash 内容。以 Flash Lite 开发完成的动画，使用者可以轻易地透过无线传输的技术将 动画传到手机上，以呈现个人化的 2D 表现方式，因此采用 2D 矢量图形技术所开发的数位内容愈趋成熟，也就愈加突显硬体层 2D 矢量绘图加速的重要。目前资策会网多所正在发展符合 OpenVG 标准的 Mobile Vector Graphics Rendering Engine ；读者如果在行动 2D 矢量绘图技术有任何的问题或需要更进一步的资讯，欢迎透过 E-Mail 与笔者联络。 参考资料：/svgt/index.html/software/flashlite/http:/www.hybrid.fi/main/company/index.phphttp:/www.bitboys.fi///index.aspJ2ME移动2D图形快速入门 绪论这篇文章将介绍可升级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文件：Hello brave world.这个文档声明了两个矩形和一些文字。第一个矩形绕它的中心旋转15度，这一系列的转换都包含在rect标记的转换属性中。第二个矩形在第一个之上绘制，然后文本在第二个矩形之上绘制。即时未经修饰的文本不是一个特别的简洁格式，这个文档仍旧比一个压缩的光栅图像小的多，并且易于人工导入。因为XML文本可以充分地压缩，所以SVG在应用程序的JAR文件中就占用相对较少的空间。JSR-226要求支持SVG文档的实现使用gzip格式压缩。后缀名.svgz表示gzip压缩的文档。 Mobile 2D APIJSR-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.dom和org.w3c.dom.events包中定义DOM类和接口的扩展。Class或Interface描述javax.microediton.m2gScalableGraphics2D渲染的基础类SVGAnimator这个类对一个目标用户接口组件，处理SVGImage的更新和动画的自动渲染SVGEventListener这个接口用来处理一个应用程序的平台相关事件SVGImage这个类代表符合W3C SVG Tiny1.1 Profile的SVG图像ExternalResourceHandler这个接口用来同步加载装入SVG内容所需要的外部资源org.w3c.dom.svgSVGAnimatorElement这个接口代表一个动画元素，包含控制动画时间的方法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，然后把它Canvas放到屏幕上。另外一个方法是创建一个ScalableImage的实例，然后使用ScalableGraphics的实例将它绘制到你自己的Canvas或者CustomItem的图形上下文中。你将会获得除了展现外的更多控制，但是你必须负责处理输入事件，并且为动画效果或者用户交互进行重绘。 使用一个SVGAnimator显示2D图像你可以通过SVGAnimator的静态方法createAnimator()获得一个它的实例，需要提供你自己的图像。使用SVGAnimator是一个不错的选择，因为它处理所有的用户交互，和动态内容的动画。play()、pause()、stop()和setTimeIncrement()方法会给你除了重放之外的对动画的可编程控制。实现可能提供一个本地用户接口，可以同样的处理动态行为。一旦你获得SVGAnimator，就可以很容易的将它嵌入到你的应用程序中。调用getTargetComponent()会一个Canvas实例，它可以被放置在屏幕上。下面是一个例子：public void animationTest()/ create an animator to load the contentSVGAnimator animator =SVGAnimator.createAnimator( image );/ add our custom event listeneranimator.setEventListener(new CustomEventListener( animator ) );/ get the Canvas for this player; requires a castCanvas canvas = (Canvas) animator.getTargetComponent();/ add a back commandcanvas.addCommand( backCommand );canvas.setCommandListener( this );/ show itDisplay.getDisplay(this).setCurrent( canvas );/ start itanimator.play();在MIDP环境中，从getTargetComponent()返回的值是一个MIDP Canvas。在非MIDP环境中，返回值将适合本地窗口系统，例如在AWT环境中，返回值是Component。如果当前环境拥有一个以上的可用的选择，那么就提供需要的类型的名字作为createAnimator()的第二个参数。图3显示了运行时结果。根据不同的实现，和笔触设备的可用性，动画绘制器可能允许用户和动画内容进行交互。在“brave world”例子中没有动态的内容，但是文本是可选的。图3 由SVGAnimator控制的Canvas 和动画绘制器交互尽管“brave world”图像不是一个动画，一些程序设计还是可以增加交互的。JSR-226的DOM支持一个程序改变一个图像的结构。和任何其他的XML文档一样，一个SVGImage可以用一个DOM对象树代表。M2G API允许你使用类似熟悉的XML处理技术来修改图像。树中的每一个节点是一个SVGElement，提供操纵临近的父节点和子节点的方法。你可以通过添加和删除子节点修改节点，或者转换成一个合适的元素类，然后调用那个类的方法进行改变。SVGEventListener结构使你的应用程序可以从SVGAnimator的Canvas接收用户的输入事件。这个例子是用DOM API来等比例变化和旋转这个图像，用户可以通过箭头键输入：int gameAction = canvas.getGameAction( keyCode );switch ( gameAction )case Canvas.UP:scale( 0.10f );break;case Canvas.LEFT:rotate( -10.0f );break;case Canvas.DOWN:scale( -0.10f );break;case Canvas.RIGHT:rotate( 10 );break;default:/ leave unchangedprivate void rotate( final float delta )/ put ourselves on the animators threadanimator.invokeLater( new Runnable()public void run()/ execute the transformationDocument document = svgImage.getDocument();SVGSVGElement root = (SVGSVGElement)document.getDocumentElement();root.setCurrentRotate( root.getCurrentRotate() + delta ); );private void scale( final float delta )/ put ourselves on the animators threadanimator.invokeLater( new Runnable()public void run()/ execute the transformationDocument document = svgImage.getDocument();SVGSVGElement root = (SVGSVGElement)document.getDocumentElement();root.setCurrentScale( root.getCurrentScale() + delta ); );SVGImage.getDocument()提供了动画绘制器渲染的文档的引用。因为这个播放器可能正在运行一个或者更新一个动态的内容，所以你必须小心地将你的变化和动画线程同步，否则将会发生不可确定的错误。SVGAnimators invokeAndWait() 和invokeLater()方法就像它们的AWT副本一样，可以保证你的代码在动画线程上运行。 直接渲染2D内容如果你想除了你的SVG图像在哪里和怎样被渲染外获得完全的控制，你可以使用ScalableGraphics类直接绘制一个ScalableImage到Graphics对象之上，这个Graphics对象被传递到Canvas、Layer或者CustomItem实例的paint()方法中。你通过调用ScalableGraphics的静态createInstance()方法创建一个它的实例。在绘制之前，你必须首先使用bindTarget()方法将ScalableGraphics实例和传递到绘制方法中的Graphics对象绑定。在完成以后，请调用releaseTarget()。一旦建立绑定，你就可以使用render()方法绘制你的每一个图像。这个例子以不同的大小重复绘制“brave world”图像，例子通过在每一次调用render()方法前调用setViewportHeight()和setViewportWidth()方法改变图像大小：private static class M2GCanvas extends Canvas/ retain a reference the specified imageScalableImage scalableImage;/ re