Implementation

For information about the design and functionality of the MIDlet, see section Design.

The SvgCanvas2 class handles the setting up and drawing of the pre-generated static SVG image. The constructor of the class first sets up the 2D rendering context by using a ScalableGraphics object:

    public SvgCanvas2(boolean suppressKeyEvents) {
        super(suppressKeyEvents);

        // *** setup an instance of ScalableGraphics
        sg = ScalableGraphics.createInstance();
        sg.setRenderingQuality(sg.RENDERING_QUALITY_HIGH);

Rendering quality is set to RENDERING_QUALITY_HIGH, which is also the default setting on Series 40 and Symbian devices. This quality level is dependent on the device and the MIDlet code, and is mapped to definitions in the SVG specification (shape, text, image, and color rendering). If you are concerned about portability, check the specifications of the devices the MIDlet is targeted for, since the results are different depending on device capabilities.

The constructor then creates an SVGImage using the content2.svg file as a source, and sets the image dimensions to fit the device screen using the SVGImage.setViewportWidth and SVGImage.setViewportHeight methods:

        // *** load an svg image from a file
        try {
            InputStream svgStream = getClass().getResourceAsStream("content2.svg");
            svgImage = (SVGImage) (SVGImage.createImage(svgStream, null));

            // ** set the width and height of the document to match the screen capabilities
            svgImage.setViewportWidth(getWidth());
            svgImage.setViewportHeight(getHeight());

        } catch (Exception e) {
            e.printStackTrace();
        }
    }

The GameCanvas.paint method handles the painting of the GameCanvas. The ScalableGraphics object renders the SVGImage set up in the constructor:

    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);
        sg.render(0, 0, svgImage);
        sg.releaseTarget();
    }

The ScalableGraphics.bindTarget method sets where the SVG image is rendered, that is, the target Graphics object. Transparency is set to 1.0, which means fully opaque. The image is drawn in the top-left corner of the GameCanvas, at coordinates 0,0.

When the user selects Zoom In from the options menu, the following code is run:

    public void zoomIn() {
        SVGSVGElement myEl = (SVGSVGElement) (svgImage.getDocument().getDocumentElement());
        myEl.setCurrentScale(myEl.getCurrentScale() * 1.2f);
        repaint();
    }

This modifies the scale property of the SVG document and redraws the GameCanvas, causing the SVG image to be displayed larger. The other menu options for manipulating the image work similarly.

The following code, which is run when the user selects Restore View from the options menu, restores the original zoom and rotation settings:

    public void restoreView() {
        SVGSVGElement myEl = (SVGSVGElement) svgImage.getDocument().getDocumentElement();
        myEl.setCurrentRotate(0);
        myEl.setCurrentScale(1);
        SVGPoint origin = myEl.getCurrentTranslate();
        origin.setX(0);
        origin.setY(0);
        repaint();
    }