Using Location-Enabled MIDlets for Mobile Navigation, Page 3
Implementing the SVG APISVG is an XML grammar for rich, dynamic 2D graphics. It boasts the following attributes:
- Lightweight: SVG graphics are typically more compact than their raster equivalents.
- Zoomable: SVG content can be viewed at different resolutions (e.g., enlarged or shrunk) without losing quality. This is the reason for including "Scalable" in the name Scalable Vector Graphics.
- Searchable: Because SVG content is XML, the content of an SVG image is searchable for text elements, comments, or any meta-data.
- Structured: SVG's structure makes it suitable to the requirements of user accessibility.
Table 2 provides the various classes and interfaces available in JSR 226: Scalable 2D Vector Graphics API for J2ME, which are used to implement SVG functionality.
|Class or Interface||Description|
|Scalable Graphics||Fundamental class for 2D rendering|
|SVGAnimator||Class handles automatic rendering of updates and animations in an SVGImage to a target user interface component|
|SVGEventListener||Interface used to forward platform-specific events to an application|
|SVGImage||Class represents an image conforming to W3C SVG Tiny 1.1 (1.2) Profile|
|External Resource Handler||Interface is used to load synchronously any external resources needed for loading SVG content|
|SVGAnimationElement||Interface represents an animation element and includes methods to control timing of animations|
|SVGElement||Interface represents an SVG element in the document tree|
|SVGLocatableElement||Interface represents a drawable SVG element (typically a shape, image, or text)|
|SVGMAtrix||Interface represents an SVG matrix data type identified by an affine transformation equivalent to a linear transformation followed by a translation|
|SVGPath||Interface represents a SVG path data type used to define path geometry|
|SVGPoint||Interface represents a SVG point data type identified by its X and Y components|
|SVGRect||Interface represents a SVG rectangle data type consisting of mimimum X, minimum Y, width and height values|
|SVGRGBColor||Interface represents a SVG RGB color data type composed of red, green, and blue componets|
|SVGSVGElement||Interface represents an element in SVG document tree (Whereas SVGElement represents a SVG element in the document tree.)|
|Table 2. Classes and Interfaces in JSR 226|
The following gets the root SVG element in the SVG document tree into myEl. From the getBBox() function (BBox stands for bounding Box), you can get the height and width of the SVG root object.
SVGSVGElement myEl = (SVGSVGElement)(You can get the current scaling factor by using the getCurrentScale() method of the root SVGElement. Similarly, you can get the current translate position using the getCurrentTranslate() method.
svgImage.getDocument().getDocumentElement());SVGRect myRect = myEl.getBBox();
float fa = myEl.getCurrentScale();SVGPoint p1= myEl.getCurrentTranslate();To zoom in, you can multiply the current scale by a factor. This example uses 1.2. The setCurrentScale() method is used for setting the scale. For zoom out, you multiply current scale by a factor of 1/1.2.
This scaling is carried out with respect to the top-left corner, whose coordinates are (0,0). In order to zoom in and out with respect to the center of the display, a translation has to be applied after scaling (as the code will show shortly). To achieve this translation, the SVGPoint p1 obtained from the getCurrentTranslate() method shown above is used to get the X and Y coordinates of the current translated position, as shown below.
float xf = p1.getX();float yf = p1.getY();Then the setX() and setY() methods are used to change the translation coordinates, where delta_x and delta_y are the X and Y coordinates by which the current position must be translated.
p1.setX(xf + delta_x);p1.setY(yf + deltay);Listing 2 shows the code for the complete functionality in SVGStaticCanvas.java. The code is for the Canvas UI, the display of the campus map on the screen, and the zoom in, zoom out, and translation functions.
Page 3 of 4