[JSR 226] translating an SVGImage problem

[hardc0d3r]

in the simulator, doing this is fine...

protected void paint(Graphics g) {
        g.setColor(0xFFFFFF);
        g.fillRect(0, 0, getWidth(), getHeight());
        g.translate(x, y);
        scalableGraphics.bindTarget(g);
        scalableGraphics.render(0, 0, svgImage);
        scalableGraphics.releaseTarget();
    }

svgImage is translating correctly.. but when it is deployed on a phone, the svgImage is not translating.. so i changed the code to this..

protected void paint(Graphics g) {
        g.setColor(0xFFFFFF);
        g.fillRect(0, 0, getWidth(), getHeight());
        //g.translate(x, y);
        scalableGraphics.bindTarget(g);
        scalableGraphics.render(x, y, svgMap);
        scalableGraphics.releaseTarget();
    }

it makes a weird behavior int the simulator if you translate another Graphics element like lines or images.. i think it doubles the translate or something. but when deployed on a phone it translates correctly, BUT the svgImage is not drawn completeley... only the initial visible part was only drawn (i was panning the svgImage using the scalableGraphics.render(x, y, svgMap)).. what's wrong? what am i doing wrong here? what is the right way of panning?

[hardc0d3r]

by the way, i'm using Netbeans 6.0.1, WTK 2.5.2, and my phone is a 6110 Navigator. here is a sample MIDlet that does what i explained..

PanTest.java

import java.io.IOException;
import javax.microedition.io.Connector;
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
import javax.microedition.m2g.ExternalResourceHandler;
import javax.microedition.m2g.SVGImage;
import javax.microedition.m2g.ScalableImage;

public class PanTest extends MIDlet {
    public void startApp() {
        SVGImage newSVGImage = null;
        try {
            // load our image up-front
            newSVGImage = (SVGImage) ScalableImage.createImage(
                    getClass().getResourceAsStream("/sample.svg"),
                    new CustomResourceHandler());
        } catch (IOException ioe) {
            ioe.printStackTrace();
        }
        TestCanvas c = new TestCanvas(newSVGImage);
        Display.getDisplay(this).setCurrent(c);
    }

    public void pauseApp() {
    }

    public void destroyApp(boolean unconditional) {
    }

    private static class CustomResourceHandler
            implements ExternalResourceHandler {

        public void requestResource(ScalableImage inImage, String inURI) {
            try {
                Connector.openInputStream(inURI);
            } catch (IOException ioe) {
                ioe.printStackTrace();
            }
        }
    }
}

[hardc0d3r]

TestCanvas.java

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
import javax.microedition.m2g.SVGImage;
import javax.microedition.m2g.ScalableGraphics;

public class TestCanvas extends Canvas {

    private ScalableGraphics scalableGraphics;
    private SVGImage svgMap;
    int x;
    int y;

    public TestCanvas(SVGImage image) {
        this.svgMap = image;
        this.setFullScreenMode(true);
        scalableGraphics = ScalableGraphics.createInstance();
        scalableGraphics.setRenderingQuality(ScalableGraphics.RENDERING_QUALITY_LOW);
        x = 0;
        y = 0;
    }

    protected void paint(Graphics g) {
        g.setColor(0xFFFFFF);
        g.fillRect(0, 0, getWidth(), getHeight());
        //g.translate(x, y);
        scalableGraphics.bindTarget(g);
        scalableGraphics.render(x, y, svgMap);
        scalableGraphics.releaseTarget();
        //g.translate(-x, -y);
        g.setColor(0x000000);
        g.drawString(x + ", " + y, 0, 0, Graphics.LEFT | Graphics.TOP);
    }

    public void keyPressed(int keyCode) {
        switch (keyCode) {
            case -1:
                y += 5;
                break;
            case -2:
                y -= 5;
                break;
            case -3:
                x += 5;
                break;
            case -4:
                x -= 5;
                break;
        }
        repaint();
    }

    public void keyReleased(int keyCode) {

    }
}

[hardc0d3r]

sample.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns="http://www.w3.org/2000/svg"
     contentScriptType="text/ecmascript"
     width="1204" height="1566" viewBox="0 0 1204 1566"
     baseProfile="tiny"
     zoomAndPan="magnify"
     contentStyleType="text/css"
     preserveAspectRatio="xMidYMid meet"
     xml:space="preserve" version="1.1">
     
     <circle id="topLeftCoordinate" cx="50.1049422484619" cy="14.387594174164514" r="310" />
     <circle id="bottomRightCoordinate" cx="50.09531507039965" cy="14.40423976700292" r="310" />
     <rect id="mapDimensions" x="0" y="0" width="1204" height="1566" />
     
    <rect x="0" y="0" width="1204" height="1566" fill="#eeeeee" stroke="#000000" stroke-width="3" />
    <g id="roads">
    <g id="minorRoads">
        <g name="New Road" stroke-width="2" stroke="rgb(0, 0, 255)">
            <line y2="84.36734" id="1008.0408,9.061222,962.1224,84.36734" x1="1008.0408" x2="962.1224" y1="9.061222"/>
            <line y2="37.224483" id="962.1224,84.36734,886.8163,37.224483" x1="962.1224" x2="886.8163" y1="84.36734"/>
            <line y2="98.448975" id="886.8163,37.224483,745.3877,98.448975" x1="886.8163" x2="745.3877" y1="37.224483"/>
            <line y2="163.95917" id="745.3877,98.448975,593.551,163.95917" x1="745.3877" x2="593.551" y1="98.448975"/>
            <line y2="174.97958" id="593.551,163.95917,556.20404,174.97958" x1="593.551" x2="556.20404" y1="163.95917"/>
            <line y2="180.48978" id="556.20404,174.97958,540.89795,180.48978" x1="556.20404" x2="540.89795" y1="174.97958"/>
            <line y2="190.2857" id="540.89795,180.48978,522.5306,190.2857" x1="540.89795" x2="522.5306" y1="180.48978"/>
            <line y2="231.3061" id="522.5306,190.2857,437.42853,231.3061" x1="522.5306" x2="437.42853" y1="190.2857"/>
            <line y2="264.97955" id="437.42853,231.3061,371.91833,264.97955" x1="437.42853" x2="371.91833" y1="231.3061"/>
            <line y2="293.75507" id="371.91833,264.97955,332.12244,293.75507" x1="371.91833" x2="332.12244" y1="264.97955"/>
            <line y2="317.63263" id="332.12244,293.75507,304.5714,317.63263" x1="332.12244" x2="304.5714" y1="293.75507"/>
            <line y2="323.79056" id="304.5714,317.63263,293.07257,323.79056" x1="304.5714" x2="293.07257" y1="317.63263"/>
            <line y2="326.6711" id="293.07257,323.79056,279.9043,326.6711" x1="293.07257" x2="279.9043" y1="323.79056"/>
            <line y2="325.43658" id="279.9043,326.6711,269.20508,325.43658" x1="279.9043" x2="269.20508" y1="326.6711"/>
            <line y2="329.5517" id="269.20508,325.43658,260.97488,329.5517" x1="269.20508" x2="260.97488" y1="325.43658"/>
            <line y2="339.4279" id="260.97488,329.5517,214.88591,339.4279" x1="260.97488" x2="214.88591" y1="329.5517"/>
            <line y2="351.36163" id="214.88591,339.4279,123.530945,351.36163" x1="214.88591" x2="123.530945" y1="339.4279"/>
            <line y2="359.59183" id="123.530945,351.36163,101.72097,359.59183" x1="123.530945" x2="101.72097" y1="351.36163"/>
            <line y2="375.64066" id="101.72097,359.59183,88.5527,375.64066" x1="101.72097" x2="88.5527" y1="359.59183"/>
            <line y2="395.8046" id="88.5527,375.64066,84.02609,395.8046" x1="88.5527" x2="84.02609" y1="375.64066"/>
            <line y2="414.734" id="84.02609,395.8046,77.03044,414.734" x1="84.02609" x2="77.03044" y1="395.8046"/>
            <line y2="457.5309" id="77.03044,414.734,34.23353,457.5309" x1="77.03044" x2="34.23353" y1="414.734"/>
            <line y2="497.44727" id="34.23353,457.5309,29.706917,497.44727" x1="34.23353" x2="29.706917" y1="457.5309"/>
            <line y2="529.545" id="29.706917,497.44727,36.702568,529.545" x1="29.706917" x2="36.702568" y1="497.44727"/>
            <line y2="522.9608" id="36.702568,529.545,59.335556,522.9608" x1="36.702568" x2="59.335556" y1="529.545"/>
            <line y2="525.4299" id="59.335556,522.9608,85.67213,525.4299" x1="59.335556" x2="85.67213" y1="522.9608"/>
            <line y2="529.1335" id="85.67213,525.4299,114.06624,529.1335" x1="85.67213" x2="114.06624" y1="525.4299"/>
            <line y2="522.1378" id="114.06624,529.1335,146.16393,522.1378" x1="114.06624" x2="146.16393" y1="529.1335"/>
            <line y2="488.8056" id="146.16393,522.1378,189.37234,488.8056" x1="146.16393" x2="189.37234" y1="522.1378"/>
            <line y2="457.11945" id="189.37234,488.8056,218.17798,457.11945" x1="189.37234" x2="218.17798" y1="488.8056"/>
            <line y2="435.30945" id="218.17798,457.11945,244.92604,435.30945" x1="218.17798" x2="244.92604" y1="457.11945"/>
            <line y2="398.27365" id="244.92604,435.30945,275.3777,398.27365" x1="244.92604" x2="275.3777" y1="435.30945"/>
            <line y2="418.4376" id="275.3777,398.27365,281.96185,418.4376" x1="275.3777" x2="281.96185" y1="398.27365"/>
            <line y2="346.01202" id="281.96185,418.4376,308.7099,346.01202" x1="281.96185" x2="308.7099" y1="418.4376"/>
            <line y2="317.63263" id="308.7099,346.01202,304.5714,317.63263" x1="308.7099" x2="304.5714" y1="346.01202"/>
        </g>
        <g name="New Road">
            <line y2="346.01202" id="293.07257,323.79056,308.7099,346.01202" x1="293.07257" x2="308.7099" y1="323.79056"/>
        </g>
            </g>
    </g>
</svg>

[hardc0d3r]

anyone, please?

[SYTDeath]

I might have the same problem as yours. I convert png image to svg format from Adobe Illustrator CS3. Translate method also works weird which likes double the values, and auto stretch the converted svg image to fit the screen width even if I change the width from svg file.