29 июня 2009 - Использование векторной графики и анимации в Java ME (JSR 226 API)

Векторная графика SVG

Приведенный ниже пример показывает насколько просто можно использовать векторные SVG изображения в Java ME приложениях.

Scalable Vector Graphics (SVG), как собственно следует из названия, являются масштабируемыми, то есть векторная картинка может быть нарисована в любом разрешении без потери качества. Собственно сам размер картинки первоначально задается в SVG файле, а потом может быть изменен средствами API.

JSR 226 API обеспечивает простой механизм загрузки и отображения SVG файлов. Сначала необходимо получить доступ к картинке как к InputStream, используя метод Class.getResourceAsStream(). Для загрузки SVG вызывается метод javax.microedition.m2g.SVGImage.createImage(), которому в качестве параметра передается указанный InputStream. После того как ресурс загружен, он доступен как SVGImage объект. Для отображения картинки на экране используются методы класса javax.microedition.m2g.ScalableGraphics. Так для отображения картинки нужно создать класс-потомок Canvas. В этом классе нужно создать экземпляр ScalableGraphics класса, а затем вызвать метод SVGImage.bindTarget(), который связывает его с Canvas. Для отрисовки SVG изображения нужно использовать метод ScalableGraphics.render(). После того как рендеринг завершен нужно вызвать ScalableGraphics.releaseTarget() и освободить Canvas.

Для изменения размеров изображения, можно использовать методы setViewportWidth(), setViewportHeight().

Отображение векторной графики в Java ME мидлете средствами JSR 226 API

import javax.microedition.m2g.SVGImage;
import javax.microedition.midlet.*;

...
// Это класс, в котором происходит загрузка svg изображения, которое затем
// передается в SVGImageCanvas для отображения на экране.
public class RenderSVGImageDemo extends MIDlet implements CommandListener {
    .....
    // Аолучаем входящий поток для SVG рисунка,
    // расположенного в jar архиве мидлета.
    InputStream svgDemoStream = getClass().getResourceAsStream(svgImageName);

    ...
    // Создаем объект SVGImage на основании входящего потока.
    SVGImage svgImage = (SVGImage) SVGImage.createImage(svgDemoStream, null);

    ...
    // Создаем объект SVGImageCanvas, передаввя ему в
    // качестве параметра svgImage.
    svgCanvas = new SVGImageCanvas(svgImage);

    ...
    // Делаем svgCanvas видимым, то есть вызываем его
    // метод рисования.
    Display.getDisplay(this).setCurrent(svgCanvas);

    ....
}

// MIDP Canvas, в котором происходит отображение
// SVG графики с помощью ScalableGraphics
class SVGImageCanvas extends Canvas {

    // SVGImage рисуемый на canvas.
    protected SVGImage svgImage;

    .....
    // ScalableGraphics используется для рисования
    // svg картинки в MIDP Graphics.
    protected ScalableGraphics sg = ScalableGraphics.createInstance();

    ....
    public void paint(Graphics g) {
        // Связываем ScalableGraphics с экземпляром класса MIDP's Graphics
        sg.bindTarget(g);
        // Устанавливаем размеры рисунка
        svgImage.setViewportWidth(getWidth());
        svgImage.setViewportHeight(getHeight());
        // Выводим картинку в точке(0,0)
        sg.render(0, 0, svgImage);
        // Освобождаем MIDP Graphics
        sg.releaseTarget();
    }

    ...
}

SVG анимация

Существует два способа анимирования SVG графики: декларативная анимация и "ручное" изменение параметров SVG изображения (например цвет или положение) с помощью вызова API функций. Приведенный ниже пример иллюстрирует декларативную анимацию, то есть SVG файл уже содержит в себе все данные об анимации.

Для проигрывания анимированных SVG файлов используется класс javax.microedition.m2g.SVGAnimator. SVGAnimator содержит методы запуска, паузы и остановки анимации.

Пример JSR 226 Java ME кода

import javax.microedition.m2g.SVGAnimator;
import javax.microedition.m2g.SVGImage;
import javax.microedition.lcdui.Canvas;

...
// Создаем InputStream для SVG рисунка.
InputStream svgDemoStream = getClass().getResourceAsStream(svgImageName);

...
// Получаем из потока SVGImage
SVGImage svgImage = (SVGImage) SVGImage.createImage(svgDemoStream, null);

...
// Создаем SVGAnimator из SVGImage. SVGAnimator содержит все данные
// об анимации и позволяет проигрывать ее.
SVGAnimator svgAnimator = SVGAnimator.createAnimator(svgImage);

...
// Получаем Canvas управляемый SVGAnimator и устанавливаем
// размер для svgImage
svgCanvas = (Canvas)svgAnimator.getTargetComponent();
svgImage.setViewportWidth(svgCanvas.getWidth());
svgImage.setViewportHeight(svgCanvas.getHeight());

...
// Будем отслеживать события нажатия клавиш и в зависимости
// от нажатой клавиши будем проигрывать, делать паузу или останавливать ролик
svgAnimator.setSVGEventListener(this);
...

public void keyPressed(int keyCode) {
    if ((keyCode == KEY_PLAY) && (state != STATE_PLAYING)) {
        svgAnimator.play(); //запуск
        ....
    }
    if ((keyCode == KEY_PAUSE) && (state == STATE_PLAYING)) {
        svgAnimator.pause(); //пауза
        ....
    }
    if ((keyCode == KEY_STOP) && (state != STATE_STOPPED)) {
        svgAnimator.stop(); //остановка
        ....
    }
...