Quick Start for development of 2D images for mobile applications based on

Introduction

This article describes how to upgrade the 2D Vector Graphics API (Scalable 2D Vector Graphics API. These APIs are very easy to use and can be used to render and convert small and scalable 2D (2D) graphics, this Optional package is developed with JSR-226 in the Java Community process (JCP. I will give an overview of the API, highlight typical user cases, and use code to demonstrate these cases.

Statement

The JSR-226 introduces rendering and replay vector 2D graphics into mobile applications in Java. The expert group led by Nokia is composed of major manufacturers in the mobile industry. They are very interested in introducing vector multimedia content to their devices. At the time of writing this article, this specification has just been approved and everyone is eagerly awaiting a reference implementation.

For mobile developers, vector graphs have two advantages: small space occupation and good scalability. Consider the following simple image:

Figure 1 a simple sample image

In GIF format, the image size will reach 7386 bytes. The vector format is used. The size is only 693 bytes, less than 10 bytes. How does this reduction happen?

The grating-based image format, such as GIF, encodes the color content of each pixel in the rectangular area of the image. Vector graphs only contain painting instructions that determine how pixels should be colored. Vector representation of an image can be compressed to a greater extent, which is a great advantage for mobile devices with limited resources.

Good scalability is another important advantage. Vector graphs can be clearly transformed because their painting instructions are irrelevant to the resolution. Figure 2 shows the scaled down, flipped, and rotated image of the previous image.

Figure 2 conversion of the sample image

The measurement units of a vector chart are arbitrary and relative. They can be multiplied or divided by some constant factors to transform the image to adapt to the screen of a specific device. By using simple mathematical operations on this coordinate system, you can create infinite effects, including flip, rotation, stretching, and twisting. With vector images, application developers no longer need to create different sets of images and icons to support different screen resolutions.

The conciseness and scalability of vector images shine brightly in the animation field. Raster-based animations, such as GIF and MIDP Game Genie in webpages, are laborious to include the entire picture in every frame of the animation. In contrast, a vector-based animation only contains instructions that specify the elements of the image when the animation needs to be changed. If the vector image size is an order of magnitude smaller than the corresponding grating image, the vector animation size is two orders of magnitude smaller than the corresponding grating animation, this makes them an ideal choice for transforming and displaying multimedia content on mobile devices.

When Vector and Vector animations based on private Macromedia Flash players become popular, Scalable Vector Graphics (SVG) file formats can be upgraded with open standards and free patent rights, become another choice in the industry. It is standardized by W3C. SVG-Tiny provides a subset of all SVG functions and is suitable for mobile devices. The JSR-226 uses version 1.1 of SVG-Tiny as the official file format for j2_vector graphics. W3C calls SVG-Tiny a "Profile", but I call it "format" to avoid confusion with the Profile of J2EE ".

The SVG-Tiny standard also supports animation. Instructions in the image file can modify the positions and attributes of image elements to respond to clock events and user input.

For more complex interactions, JSR-226 introduced microDOM-compatible APIs, a subset of SVG1.2's Complete Document Object Model (DOM.

SVG is an extensible markup language (XML) format that uses a public Schema for full annotation and systemization. SVG-Tiny may be small, but they are still SVG files that still contain XML. The following is a complete SVG-Tiny file that represents a "brave world" image:

＜?xml version="1.0" standalone="no"?＞
＜!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"＞
＜svg preserveAspectRatio="xMidYMid meet"
viewbox="10 10 130 55" width="150.0" height="75.0"＞
＜rect x="25" y="25" transform="translate(75 36.375)
rotate(15) translate(-70 -35.375)" fill="#00007E"
width="100" height="22.75" stroke="#000000" stroke-width=".5"/＞
＜rect x="25" y="25" fill="#FF9800" width="108.5"
height="22.75" stroke="#000000" stroke-width=".5"/＞
＜text x="30" y="40" fill="#00007E" stroke="#FFFFFF"
stroke-width=".33" xml:space="preserve"＞Hello brave world.＜/text＞
＜/svg＞

This document declares two rectangles and some text. The first rectangle rotates around its center for 15 degrees, and all the conversions are included in the conversion attribute of the rect mark. The second rectangle is drawn on top of the first rectangle, and the text is drawn on top of the second rectangle.

Text without modification is not a very concise format. This document is still much smaller than a compressed grating image and is easy to import manually. Because the XML text can be fully compressed, SVG occupies a relatively small amount of space in the JAR file of the application. JSR-226 requires support for SVG documentation Implementation Using gzip format compression. Suffix. svgz indicates the gzip compressed document.

Mobile 2D API

A major purpose of the JSR-226 is to define the Mobile 2D Graphics (Mobile 2D Graphics, M2G) API, which is a group of classes closely integrated with the SVG-Tiny format features. It is not specified as a normal 2D drawing toolbox, as provided by the Graphics2D class of J2SE. M2G API is clearly positioned to play and manipulate SVG content at runtime.

M2G consists of high-level and low-level classes. The advanced class is used to create and render vector graphics, while the low-level class is responsible for manipulating the XML component of a vector image with the DOM tree. Vector images are examples of ScalableImage. You can use this static createImage () method to obtain them. You use an instance of ScalableGraphics to draw ScalableImages to a MIDP graphics context. SVGImage is a subclass of ScalableImage. It provides links between event processing and access to the underlying DOM document.

This API provides the SVGAnimator class to render the SVG content of an animation more easily. For the MIDP application, SVGAnimator creates and controls a Canvas object that automatically processes screen updates to respond to animation events and planned modifications to the image. SVGAnimator provides a player-like interface to control the playback of an animation.

These classes are defined in the javax. miroedition. m2g and org. w3c. dom. svg packages, which are summarized in table 1 and fully annotated in the JSR-226 specification. Svg dom defines dom class and interface extensions in the standard org. w3c. domorg. w3c. DOM. events package.

Class or Interface	Description
Javax. microediton. m2g
ScalableGraphics	Basic class for 2D Rendering
SVGAnimator	This class processes SVGImage updates and automatic animation rendering for a target user interface component.
SVGEventListener	This interface is used to process platform-related events of an application.
SVGImage	This class represents SVG images that comply with W3C SVG Tiny1.1 Profile
ExternalResourceHandler	This interface is used to synchronously load external resources required to load SVG content.
Org. w3c. dom. svg
SVGAnimatorElement	This interface represents an animation element and contains a method for controlling the animation time.
SVGElement	This interface represents an SVG Element in the document tree.
SVGLocatableElement	This interface represents a printable SVG element, typical shape, image, or text
SVGMatrix	This interface represents an SVG matrix data type, defined by an affine matrix, equivalent to a linear transformation of translation.
SVGPath	This interface represents an SVG path data type, used to define the geometric path
SVGPoint	This interface represents an SVG point data type, marked by x and y.
SVGRect	This interface represents the SVG rectangle data type, which consists of the minimum X, minimum Y, width, and height.
SVGRGBColor	This interface represents the svg rgb color data type, consisting of red, green, and blue
SVGSVGElement	This interface represents an element in the SVG document tree.

Create an M2G Application

To create an M2G application, you need JSR-226 implementation that can work. At the time of writing this article, this specification was just finalized; there was no device to implement it, and there was no official reference to implement it. You can download a limited implementation as an additional package for the mpowerplayer developer toolkit.

You also need some SVG-Tiny content. This article uses the "brave world" image, but more examples of SVG-Tiny can be obtained from the mobile development tool maker TinyLine. You can also use a commercial Java application to create your own content. This application is called Sketsa. It can work like an illustration tool and use SVG as its file format.

There are only a few ways to draw your SVG content to the screen. The simplest thing is to create a SVGAnimator for your image, and then