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(); } }

|