SVG(JSR 266)开发入门指南

该文章转载自J2ME开发网，本文版权归原作者和J2MEDEV所有。
SonyEricsson的W950 M600和P990是基于Symbian平台的手机，并且手机上实现的是Symbian Java Platform 3。在SJP-3中提供了对Scalable Vector Graphics的支持，本文说明如何从文件中装载生成SVG Image以及如何在代码中创建SVG Image。

下面是用于创建SVG Image的文件svgImage.svg。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

<svg width="240" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg" baseProfile="tiny">
<circle id="circle" cx="75" cy="75" r="25" fill="#C8C800" fill-opacity="0.5" stroke="#000000" stroke-width="5.0"/>
<rect id="rect" x="75" y="75" width="50" height="50" fill="#640000" fill-opacity="0.5" stroke="#000000" stroke-width="5.0" />

</svg>

在这个文件中我们会创建一个圆和一个矩形，信息如下。
Circle:
Id = Circle // id用来标记这个圆，这样可以在
cx = 75 // 原点 X
cy = 75 // 原点 Y
r = 25 // 半径
fill = C8C800 // 填充色
fill-opacity = 0.5 // 50% 透明度
stroke = black // border的颜色
stroke-witdh = 5 // Border的宽度

下面的代码说明了如何在MIDlet中载入上面的文件

private SVGImage svgImage = null;
private ScalableGraphics gc;
...
InputStream is = getClass().getResourceAsStream("/svgImage.svg");
svgImage = (SVGImage) SVGImage.createImage(is, null);
public void paint(Graphics g){
gc.bindTarget(g);
gc.render(0, 0, svgImage);
gc.releaseTarget();
}

当Image创建后，你可以对它进行删改等操作，例如下面就修改了圆的半径。

Document document = svgImage.getDocument();
SVGElement circle = (SVGElement) document.getElementById("circle");
circle.setFloatTrait("r", 40.0f);

上面介绍了如何从文件创建SVG Image，下面的代码说明了如何在代码中创建。
ScalableGraphics gc = ScalableGraphics.createInstance();

SVGImage svgImage = SVGImage.createEmptyImage(null);
svgImage.setViewportWidth(getWidth());
svgImage.setViewportHeight(getHeight());
Document document = svgImage.getDocument();
SVGSVGElement root = (SVGSVGElement) document.getDocumentElement();
String namespace = root.getNamespaceURI();

SVGElement element = null;
try{
element = (SVGElement) document.createElementNS(namespace, "circle");
}catch(Exception e){
SVGDynamic.addInfo(e.toString());
e.printStackTrace();
}
SVGRGBColor fillColor = root.createSVGRGBColor(0xC8, 0xC8, 0);
SVGRGBColor strokeColor = root.createSVGRGBColor(0, 0, 0);

element.setId("circle");
element.setFloatTrait("cx", 75.0f);
element.setFloatTrait("cy", 75.0f);
element.setFloatTrait("r", 25.0f);
element.setFloatTrait("fill-opacity", 0.5f);
element.setFloatTrait("stroke-width", 5.0f);
element.setRGBColorTrait("fill", fillColor);
element.setRGBColorTrait("stroke", strokeColor);

root.appendChild(element);

public void paint(Graphics g) {
gc.bindTarget(g);
gc.render(0, 0, svgImage);
gc.releaseTarget();
}

WTK 2.5提供了JSR 226的实现环境，并且里面还提供了例子可供开发者参考。

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

import javax.microedition.m2g.ScalableGraphics;
import javax.microedition.m2g.SVGImage;

import org.w3c.dom.Document;
import org.w3c.dom.svg.SVGElement;
import org.w3c.dom.svg.SVGSVGElement;
import org.w3c.dom.svg.SVGRGBColor;

public class HelloSVG extends MIDlet {

protected SVGImageCanvas svgCanvas = null;

public HelloSVG() {

}

public void startApp() {
SVGImage svgImage = SVGImage.createEmptyImage(null);
Document doc = svgImage.getDocument();
SVGSVGElement svg = (SVGSVGElement) doc.getDocumentElement();
SVGElement textElement = (SVGElement) doc.createElementNS("http://www.w3.org/2000/svg", "text");
textElement.setTrait("#text", "Hello JSR-226 !");
textElement.setFloatTrait("x", 50.0f);
textElement.setFloatTrait("y", 50.0f);
SVGRGBColor textColor = svg.createSVGRGBColor(0, 0, 0);
textElement.setRGBColorTrait( "stroke", textColor);

svg.appendChild(textElement);

svgCanvas = new SVGImageCanvas(svgImage);
Display.getDisplay(this).setCurrent(svgCanvas);
}

public void pauseApp() {
}

public void destroyApp(boolean unconditional) {
}
}

class SVGImageCanvas extends Canvas {

protected SVGImage svgImage;

protected ScalableGraphics sg = ScalableGraphics.createInstance();

protected SVGImageCanvas(final SVGImage svgImage) {
this.svgImage = svgImage;
}

public void paint(Graphics g) {
g.setColor(255, 255, 255);
g.fillRect(0, 0, getWidth(), getHeight());
sg.bindTarget(g);
svgImage.setViewportWidth(getWidth());
svgImage.setViewportHeight(getHeight());
sg.render(0, 0, svgImage);
sg.releaseTarget();
}
}