| 文章索引 |
|---|
| 基于J2ME的SVGT移动手机应用 |
| 2 什么是Mobile SVG标准 |
| 3 J2ME应用及其规范扩展 |
| 4 J2ME开发平台 |
| 5 JSR-226技术规范和应用 |
| 6 使用JSR-172解析XML数据 |
| 7 一个简单的SVG MIDP应用 |
| 8 Mobile SVG总结与参考资料 |
| 所有页面 |
JSR-226的定义了SVG 图形(Mobile 2D Graphics,M2G)API。其中SVG矢量图形是ScalableImage的实例,你可以通过静态的createImage()方法获得它们。 SVGImage是ScalableImage的一个子类,它提供事件处理和底层DOM文档访问之间的联系。大多数情况下我们会使用这个类。例如如何从一个SVGT文件中创建一个SVGImage实例:
try{
InputStream imageStream = getClass().getResourceAsStream("/loadScreen.svg");
SVGImage svgImage = (SVGImage)SVGImage.createImage(imageStream, null);
} catch(Exception e) {
e.printStackTrace();
}
然后,创建ScalableGraphics的一个实例:
ScalableGraphics sg = ScalableGraphics.createInstance();
最后,在paint事件中显示SVG图形:
public void paint(Graphics g) {
// *** clear the display
g.setColor(255, 255, 255);
g.fillRect(0, 0, getWidth(), getHeight());
// *** render the SVG image
sg.bindTarget(g);
sg.setTransparency(1f);
svgImage.setViewportWidth(getWidth());
svgImage.setViewportHeight(getHeight());
sg.render(0, 0, svgImage);
sg.releaseTarget();
}
为了使渲染动画SVG 内容的普通情况更加方便,JSR-226还提供了SVGAnimator类。通过SVGAnimator可以创建和控制一个Canvas对象,这个对象自动处理屏幕更新,以播放动画事件和相应用户的操作。因此使用SVGAnimator不需要显式创建ScalableGraphics对象。例如:
try{
InputStream imageStream = SVGMobile.class.getResourceAsStream("/Halloween.svg");
svgImage = (SVGImage)SVGImage.createImage(imageStream, null);
svgAnimator = SVGAnimator.createAnimator(svgImage);
}
catch(Exception e) {
e.printStackTrace();
}
// Set to 10 fps (frames per second)
svgAnimator.setTimeIncrement(0.01f);
svgCanvas = (Canvas)svgAnimator.getTargetComponent();
svgImage.setViewportWidth(svgCanvas.getWidth());
svgImage.setViewportHeight(svgCanvas.getHeight());
// The SVG root element is used to reset the time on a stop operation.
doc = svgImage.getDocument();
svg = (SVGSVGElement)doc.getDocumentElement();
svgCanvas.setCommandListener(this);
// Hook-in key listeners to play, pause and stop the animation.
svgAnimator.setSVGEventListener(this);
svgAnimator.play();
state = STATE_PLAYING;
System.err.println("PLAYING...");
// *** grab a reference to the display
display = Display.getDisplay(this);
display.setCurrent(svgCanvas);
// *** set up the midlet menu
int hotKey = 0;
svgCanvas.addCommand(exitCommand);
在应用程序中,不仅可以从SVG文档装载静态的SVG数据,而且可以创建空的SVGImage,然后通过操作其DOM数据形成需要的图形,下例中创建了一个空SVGImage,然后在DOM树中追加了一个SVG text元素。
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();
}
}