矢量图形技术的应用.docx

1、矢量图形技术的应用矢量图形技术的应用矢量图形技术在移动电话上的发展现况随着多媒体手机的应用发展越来越多元化，除了可用来当作照相机、随身听、游戏机之外，越来越多的应用也如雨后春笋般地被开发出来；在2D视觉化的相关应用上，一般呈现的方式上仍以点阵图(Bitmap)居多。然而，受限于萤幕尺寸大小的关係，当使用者进行缩放的动作后，往往会造成显像失真的问题。有鑑于此，本文将向各位读者介绍“矢量图形(vector graphics)”在这一方面所展现出的特性及目前技术发展的阶段成果与运用的情况，包括现行一些重要的规格与相关软硬体发展现况和趋势，以及矢量图形技术在多媒体手机平台上的应用，让读者可以对此领域有

2、深入的了解。另外，本文所探讨的2D矢量图形技术之应用将以高阶多媒体行动电话的平台为主，常见的如SmartPhone、Symbian等。 2D矢量图形的展现和体验相信读者对于目前个人电脑上的主流媒体格式PDF和Flash应该都不陌生，他们都是2D矢量绘图的应用，分别是由Adobe和Macromedia这两家公司所制订，前者几乎已成电子文件代名词，而后者则在动画领域独领风骚。现今使用2D矢量图形技术来开发动画的档案格式，除了耳熟能详的Flash之外，尚有由World Wide Web Consortium (W3C) 推行的SVG (Scalable Vector Graphics)，此规格是一种

3、采用XML-based格式的网页矢量图形及动画播放标准。Flash和SVG在2D矢量图形的展现有许多的相似之处，两者除了都被视为是矢量图形及动画的标准格式外，尚包括具有可任意放大缩小而不失真的特性、支援任意曲线、直线、规则曲线、标准图案（如：方形、圆形等），并且可以嵌入点阵影像档和文字、以及配合描述语言(scripting)可以做动态画面等。然而，由于制订发展的过程和时间不同，在特性上及多媒体内容的支援上，不免也出现了些许的差异。举例来说，SVG是由业界代表组成的委员会所制定及管理的，格式标准是开放的，因此可以由任何厂商，在任意时间下，实作在任何核可的工具及浏览器上；反之Flash算是封闭规格

4、属于macromedia公司所有，并且与其他规格不完全相容，未来性较不被看好。其次是SVG完全支援XML规格，所以可像HTML一样检视其原始档，这种采用ASCII格式的档案优势在于资料搜索时，容易被浏览器、搜索引擎或其他具有文字搜索功能的软体读取。反观，采用二进位格式的Flash档案在资料搜索方面就显得比较施展不开。不过，在档案的大小上就比以文字撰写成的SVG来得精简，因此较利于网路传输。整体来说，由于SVG推出的时机较晚，因此在知名度、市佔率，甚至成熟度等方面的成就，平心而论，现阶段是不及Macromedia Flash表现来得优异。时至今日，随着高阶多媒体手机已成为时下数位领域中最热门的电

5、子产品，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(T

6、iny)两种不同的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开发

7、的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平台的标准软体配备之一，让消费者

8、使用记忆体有限的行动装置时，能享受更丰富的多媒体服务，例如卡通、电子贺卡、电子邮件、甚至动画显示。至于Ikivo这家公司也提供有多媒体SVG播放器，支援的标准为SVG-T 1.2 和1.1，并有音效(Audio)和影片(Video)播放的功能。除此之外，Hybrid这家公司也发展了可展现SVG-T、SVG-B profiles的矢量绘图引擎，并提供开发应用产品的服务。目前市面上支援SVG格式的编辑工具，较具名气的有Adobe Illustrator及Corel DRAW等软体，不过使用此类矢量绘图软体的美工人员，大部分似乎已习惯Macromedia Flash编辑环境的设计介面，因此较不获得使

9、用者的青睞。过去，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等系列的手机。但是由于在行动电话市场上，依据Mobi

10、le SVG profiles所开发出来的2D矢量图形内容并不多，呈现的效果也不如Flash精緻，因此SVG矢量动画并不普及。Flash Lite由于Flash动画采用的SWF档案格式，当初是针对个人电脑(PC)设计的，因此对于支援SWF的播放器而言，若希望能够在运算能力有限的高阶多媒体手机上顺畅地播放Flash动画，则必须针对动画内容有所限制，并重新规范SWF档案格式。于是，我们就不难想像Flash Lite存在的理由了。说穿了，主要的目的就是剔除一些现阶段手机暂时无法或者不需要展现的效果，包括不能使用手机上不支援的字体，不要使用透明混色效果以及减少复杂的渐变动画效果等限制性的动画内容。一般

11、来说，从事2D矢量图形的设计者与程式开发者，皆可透过Macromedia Flash MX Professional 2004提供的编辑环境与使用者介面，创作出跨平台的动画内容，让消费者能在不同的手机上体验到Flash最具震撼的互动性，以及令人耳目一新的动画效果。由于Macromedia Flash具有完整的编辑工具，非常方便使用者制作多样化的内容，因此使用者甚至可透过工具，进一步发挥个性化的创意，在行动电话上编辑适合互动的使用者介面（参见图二）。目前，国内仁宝公司已与Macromedia签订软体授权协议，即是欲藉由Flash Lite的功能性和便利性，开发手机介面的应用程序。图2 动态的Fl

12、ash 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 P

13、800、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进行大量的运算，对电力的消耗是一大考验；再

14、者，当开发者欲移植到不同的平台时，可能又得多花一份力气。有鉴于此，2004年第四季，Khronos组织首先提出适合于硬体加速(hardware-accelerated)的2D矢量图形处理标准函式库OpenVG（参见图四）。目前OpenVG规格由Khronos组织所主导，结合多家行动装置大厂及图学组织，包括Nokia、Motorola、Bitboys、Hybrid Graphics、Symbian、Sun Microsystems、3Dlabs等公司，目标在于规范适合嵌入式系统上简单、轻便且低阶的2D矢量图形绘图引擎之功能。藉由公开、标准、统一的规格，不但硬体制造商可依据其规格设计出2D矢量图形

15、硬体加速器，同时也能加快2D矢量图形展现技术与硬体加速器垂直整合的速度。说穿了，OpenVG的目的就是在提供硬体抽象层，达到跨平台的功能，使得使用OpenVG APIs开发的应用程式，在不同平台执行时，皆可取得2D矢量图形硬体加速的功能。 根据规格的定义 ， OpenVG 可分为 Core API 和 Optional VGU utility library 两大模组；其划分的准则主要是跟硬体加速的需求有关。 Core API 模组中定义了需要藉由硬体加速支援的基本功能，而那些暂时被认定为不需要由硬体加速，或可由 Core API 模组复合而成的功能，则在 optional VGU utili

16、ty 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

17、等功能项目。 Optional VGU utility library 模组主要是以辅助并扩充 Core API 矢量图形处理的功能，其内容包含 Higher-level Geometric Primitives 和 Image Warping 等功能项目。以下将简述各模组中的细项功能：Core API模组座标系统转换功能项目：提供 User 座标系统转换到以像素为单位的 Surface 座标系统之相关设定及转换。路径绘制功能项目：提供描述几何物件(geometry)的功能。一般来说，显像图形的形状都是由Paths定义，一个Path或多个Paths可构成几何物件，而 Paths亦是由一连串的线

18、段所组成的。线段可选择由直线线段(a straight line segment)、二次或三次贝式曲线(a quadratic or cubic Bezier curve)或椭圆形弧线(an elliptical arc)定义之。 影像绘制功能项目：提供影像相关制作及处理的功能。 影像过滤功能项目：提供影像过滤处理的功能。 像素著色功能项目：提供像素著色时的顏色及型态。 混合及遮罩处理功能项目：提供像素混色及遮罩处理的功能Optional VGU utility library模组 高阶几何元件功能项目：提供应用程式设定高阶几何元件的功能。影像变形绘制功能项目：提供影像变形转换处理的功能。资策

19、会网多所已于 2004 年投入于嵌入式行动装置上 Flash 播放器的开发工作，并获得部分成果（参见图五）。而目前则是依据 Khronos 组织于 2005 年第二季所公布的 OpenVG 1.0 Final Draft Specification ，著手开发符合 OpenVG 规范的“矢量式图学函式库”，目标在建立一套可于嵌入式系统上绘制 2D 矢量图形的函式库。透过此标准界面，使用者即可利用硬体加速的功能，迅速在嵌入式系统上建立互动式的应用程式。而 Hybrid 这家公司则 将 在 OpenVG 的正式版公开后，进行 OpenVG 矢量绘图引擎的开发。 行动平台上高阶的矢量绘图标准 JSR

20、226 J2ME是Java 2技术架构内三大重要分支之一，其目的在提供诸如手机、PDA等消费性电子产品或嵌入式系统开发应用程式的平台。简单来说，只要手机厂商在其作业平台上提供可以执行J2ME的JAVA虚拟机器(KVM)，则利用J2ME所开发出来的应用程式便能在该手机上直接执行。J2ME最主要的用意是希望能把手机厂商与软体厂商连结起来，弥补在消费性电子产品或嵌入式系统上开发应用程式的缺口。由于现阶段手机大厂皆采纳了J2ME平台，包括Nokia、Motorola、Sony Ericsson与Siemens等，因此在支援J2ME平台的手机逐渐普及之下，软体厂商也顺理成章的提高了在手机上开发应用程式的

21、意愿。有鑑于此，负责制订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等等。在J

22、2ME开发环境上，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未来可能的发展，才能达到完全

23、支援的效果。此外，JSR 226若能透过OpenVG函式库来加以实作，并且充分利用矢量图形硬体加速的功能，对于JSR 226效能的展现绝对有正面的助益。最后说明JSR 226这套程式介面的应用，主要项目包括地图视觉化、可缩放的图示(icon)、及其他必须符合自由缩放需求的进阶应用。附带一提，Hybrid这家公司目前已经开始准备发展JSR 226标准规格的相关工作了。 OpenVG 在硬体加速方面的发展现况在此领域中， BitBoys 这家公司是目前投入开发适合于嵌入式系统行动装置的“ 2D 矢量绘图处理器 (2D vector graphics processor) ”最热衷的厂商。该公司于

24、2005 年 4 月发布 G12 矢量绘图处理器 的规格 ， G12 同时支援了 SVG Tiny 1.2 及 OpenVG 1.0 的标准。其特色在于体积小、符合低耗能需求可达到长时间使用之目的，并且针对多媒体整合功能设计之整合型单晶片 (SoC) 。 BitBoys 号称这颗 G12 矢量绘图处理器 的效能每秒可以达到 60 个以上的画格，并预计能在 2005 年第三季上市，届时有兴趣的消费者便可亲自体验 G12 在 行动装置上所带 来的 2D 矢量绘图处理能力。 2D矢量图形技术在行动电话上的相关应用由于 2D 矢量图形具有可自由缩放 (scalable) 以及反锯齿 (anti-ali

25、asing) 处理能力的特性，因此 2D 矢量图形的技术非常适合用于浏览设备 (navigation equipment) 、 MP3 播放器、以及行动电话这类小尺寸萤幕的行动装置上，以克服不同行动装置因萤幕大小不同而造成画面比例不佳的问题。换言之，透过这样的技术，当我们在小尺寸萤幕上显示由 2D 矢量图形的技术所产生的内容时，其绘制出来的品质将会是非常的清晰，失真的问题也可以获得有效改善。此外，由于嵌入式行动装置本身的资源限制，如：萤幕太小、记忆体频宽不足、资料传输效能不佳等因素，笔者认为使用 2D 矢量图形以取代点阵图，开发相关的应用或提供相关的服务是很合适的作法，例如具教育及娱乐功能的电

26、子书阅读、个人化手持式装置、以及使用者介面的设计。以下将简介一些可以使用 2D 矢量图形来发展的相关应用： 电子贺卡：使用 2D 矢量图形来制作动画，不但可以增加贺卡的互动效果，而且可以减少因使用点阵图所增加的档案大小。电子地图动态显示：使用2D矢量图形来制作电子地图是非常合适的应用，因为在小尺寸萤幕的行动电话上，对矢量图进行缩放后，可以有效控制失真的问题。图书馆或博物馆行动导览服务系统：方便阅览者使用2D矢量图形开发的导览系统来取得馆内的相关资讯。电子书籍阅读器的开发应用：使用2D矢量图形技术来制作字型时，由于具备高品质反锯齿的特性，因此在阅读文字时，在放大字体后仍保持阅读品质。游戏开发：可

27、提供2D或3D游戏，制作贴图或背景图片等内容。人机介面的设计：2D矢量图形用来设计可自由缩放的使用者介面，加上采用scripting设计多采多姿的动画效果，便可提供使用者独特的视觉享受，且在不同解析度的萤幕上仍能保持一致性。制作手机萤幕的桌布或是萤幕保护，以及来电大头贴等。 结语随着数位行动的时代来临，大眾对行动电话的需求与日俱增，在行动平台上，更活泼且多元的 2D 数位内容将随之而起。从目前的情况看来， Macromedia Flash Lite 能提供 让开发人员建立于行动装置的丰富内容，并让公司将其网站的外观和感觉延伸至行动电话的网站，以建立一贯的品牌形象。因此 Flash Lite 在

28、 行动电话上的发展，是有可能如同 Flash 在 PC 平台上的角色，让 行动网路到处充满了 Flash 内容。以 Flash Lite 开发完成的动画，使用者可以轻易地透过无线传输的技术将 动画传到手机上，以呈现个人化的 2D 表现方式，因此采用 2D 矢量图形技术所开发的数位内容愈趋成熟，也就愈加突显硬体层 2D 矢量绘图加速的重要。目前资策会网多所正在发展符合 OpenVG 标准的 Mobile Vector Graphics Rendering Engine ；读者如果在行动 2D 矢量绘图技术有任何的问题或需要更进一步的资讯，欢迎透过 E-Mail 与笔者联络。 参考资料：http:

29、/www.hybrid.fi/main/company/index.phphttp:/www.bitboys.fi/J2ME移动2D图形快速入门 绪论这篇文章将介绍可升级2D矢量图形API（Scalable 2D Vector Graphics API），它是J2ME的一个可选包。这些API非常易于使用，它们可以用来渲染和转换体积小和伸缩性好的二维（2D）图形，这个可选包在Java社区进程（JCP）中以JSR-226开发。我将会给出API的总括，并且突出典型的用户案例，使用代码演示这些案例。 总括JSR-226将渲染和重放矢量2D图形引入到Java语言的移动应用中。由Nokia领导的专家组，是

30、由移动行业的主要厂商组成，他们都很有兴趣将矢量多媒体内容引入到他们的设备中。在写这篇文章时，这个规范刚刚被核准，大家正在热切期待着一个参考实现。矢量图对移动开发者来说，有两大好处：占用空间小和伸缩性好。考虑下面这个简单的图像：图1 一个简单的示例图像使用GIF格式，这个图片的大小会达到7386字节。使用向量格式，大小仅仅为693字节，不到十分之一。这种减少是如何发生的呢？以光栅为基础的图像格式，像GIF，对组成图像的矩形区域中的每一个像素的色彩内容进行编码。而矢量图，仅仅包含决定像素应该如何被着色的绘画指令。一个图像的向量表示法可以更大程度上进行压缩，这对资源受限的移动设备是一个很大的有利因素

31、。伸缩性好是另外一个重要的优点。矢量图可以很清楚的进行变换，因为它们的绘画指令是和分辨率无关的。图2显示前一张图片进行等比例缩小、翻转和旋转后的图像。图2 示例图片的变换矢量图的度量单位是任意的和相对的，它们可以被一些常量因子乘或除，以变换图像从而适应特定设备的屏幕。通过对这个坐标系统使用简单的数学操作，你可以创造出无限的效果，包括翻转、旋转、拉伸和扭曲。使用矢量图像，应用程序开发者不再需要为图像和图标创建不同的集合，来支持不同的屏幕分辨率。矢量图的简洁和伸缩性在动画领域大放异彩。以光栅为基础的动画，像网页中的GIF和MIDP游戏中的精灵，在动画的每一个帧中包含整个图片都很费力。与之相比，以矢量为基础的动画仅仅包含一些指令，而这些指令规定了当需要改变动画时的图像哪些元素应该如何改变。如果矢量图的大小比它们相对应的光栅图小一个数量级，那么矢量动画的大小就比他们相对应的光栅动画小两个数量级，这使得它们成为在移动设备上变换和展示多媒体内容的理想选择。当以私有的M