绪论
这篇文章将介绍可升级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文档树中的一个元素 |