SVG——新一代Web设计及互动媒体的革新

基于J2ME的SVGT移动手机应用 - 5 JSR-226技术规范和应用

文章索引
基于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();
    }
}

  这些类都定义在javax.miroedition.m2g和org.w3c.dom.svg包中,更多内容请参考JSR-226的技术规范文档。SVG DOM是在org.w3c.dom和org.w3c.dom.events包中定义的。


 

将要更新