a few questions..

[shydisturbedboy]

1. how do i convert the coordinates of a rotated rect? when i drag the rotated rect, it does not follow the mouse.. what should i do?

2. i have many <g> in my svg and they are all overlapping.. how do i select an element under an element?

[rofl]

Hello shydisturbedboy,

> 1. how do i convert the coordinates of a rotated rect? when i drag the
> rotated rect, it does not follow the mouse.. what should i do?
maybe you post us at least your svg? and then, what mouse? Did you
program sth like an editor yourself or are you using an svg editor?


> 2. i have many <g> in my svg and they are all overlapping.. how do i select
> an element under an element?
I think you meant nested, overlapping is not possible in an xml-based
format. You can use XPath to shorten access to certain elements or use
id's on the elements you want to access and use the DOM-method
getElementById.

Cheers,

    Robert

---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@...
For additional commands, e-mail: batik-users-help@...

[shydisturbedboy]

i am trying to program it..

here are some snippets...

this is how i draw the rect:

    private void drawCell(float x, float y, float width, float length) {
    Element g = doc.getElementById("cell");
    shape = doc.createElementNS(svgNS, "rect");
   
    shape.setAttributeNS(null, "x", x + "");
    shape.setAttributeNS(null, "y", y + "");
    shape.setAttributeNS(null, "width", width + "");
    shape.setAttributeNS(null, "height", length + "");
    shape.setAttribute("style", "fill:#7cc576; stroke:#289728; stroke-width:1.5; stroke-dasharray:3.3;fill-opacity:0.2; stroke-opacity:0.8");
    shape.setAttribute("transform", "rotate(45 " + (x+width/2) + " " + (y+length/2) + ")");
   
    g.appendChild(shape);
    }

and here is how i drag:

        private class OnDownAction implements EventListener {
        public void handleEvent(Event evt) {
            DOMMouseEvent elEvt = (DOMMouseEvent)evt;
            actionNode = elEvt.getTarget();
            Node n = ((Element)elEvt.getTarget());
            startPt = convertPt((Element)n, elEvt.getClientX(), elEvt.getClientY());
           
            if(action == "DRAG") {
            if(n.getLocalName() == "circle") {
            startX = Float.parseFloat(((Element)n).getAttribute("cx"));
            startY = Float.parseFloat(((Element)n).getAttribute("cy"));
            }
            else {
            startX = Float.parseFloat(((Element)actionNode).getAttribute("x"));
        startY = Float.parseFloat(((Element)actionNode).getAttribute("y"));
            }
            }
            else if(action == "CELL") {
            drawCell(startPt.getX(), startPt.getY(), 0, 0);
            }
        }
    }
   
    private class OnUpAction implements EventListener {
        public void handleEvent(Event evt) {
            if (actionNode != null) {
            DOMMouseEvent elEvt = (DOMMouseEvent)evt;
            Element ee = (Element)elEvt.getTarget();
            if(action == "CELL" && shape != null && endPt != null) {
            shape.setAttribute("style", "fill:#7cc576; stroke:#289728; stroke-width:1.5;fill-opacity:0.2; stroke-opacity:0.8");
            shape = null;
            }
                actionNode = null;
            }
        }
    }
   
    private class OnMoveAction implements EventListener {
    public void handleEvent(Event evt) {
            Element ee = null;
            DOMMouseEvent elEvt = (DOMMouseEvent)evt;
           
            if (actionNode == null)
            return;
           
            if (action == "DRAG") {
                ee = (Element)actionNode;
                if (ee.getParentNode() != null && ee.getParentNode() instanceof Element && ((Element)actionNode).getAttribute("id") != "mapBG") {
                    SVGPoint pt = convertPt((Element)ee.getParentNode(), elEvt.getClientX(), elEvt.getClientY());
                    moveElement(ee, pt.getX(), pt.getY());
                }
            }
            else if(action == "CELL") {
            ee = (Element)actionNode;
            endPt = convertPt((Element)ee.getParentNode(), elEvt.getClientX(), elEvt.getClientY());
            redrawCell(shape, endPt.getX(), endPt.getY());
            }
        }
    }
   
    private SVGPoint convertPt(Element elem, float x, float y) {
        SVGDocument svgDocument = svgCanvas.getSVGDocument();
        SVGMatrix mat = ((SVGLocatable)elem).getScreenCTM();
        SVGMatrix imat = mat.inverse();
        SVGPoint cPt = svgDocument.getRootElement().createSVGPoint();
        cPt.setX(x);
        cPt.setY(y);
        cPt = cPt.matrixTransform(imat);
        return cPt;
    }
   
    private void moveElement(Element ee, float x, float y) {
    if(ee.getNodeName() == "circle") {
    ee.setAttribute("cx", x - startPt.getX() + startX + "");
    ee.setAttribute("cy", y - startPt.getY() + startY + "");
    }
    else {
    ee.setAttribute("x", x - startPt.getX() + startX + "");
    ee.setAttribute("y", y - startPt.getY() + startY + "");
    System.out.println();
    }
    }

[shydisturbedboy]

i also need guidance in loading/creating an svg in a servlet.. please..

[thomas.deweese]

Hi ShyDisturbedBoy,

shydisturbedboy <shydisturbedboy@...> wrote on 05/17/2007 01:25:49
AM:

>
> 1. how do i convert the coordinates of a rotated rect? when i drag the
> rotated rect, it does not follow the mouse.. what should i do?

shydisturbedboy <shydisturbedboy@...> wrote on 05/17/2007 09:06:22
AM:

>     private class OnMoveAction implements EventListener {
>        public void handleEvent(Event evt) {
>             Element ee = null;
>             DOMMouseEvent elEvt = (DOMMouseEvent)evt;
   [...]

>                     SVGPoint pt = convertPt((Element)ee.getParentNode(),
>                                             elEvt.getClientX(),
elEvt.getClientY());
>                     moveElement(ee, pt.getX(), pt.getY());

    By passing ee.getParentNode() you will be 'bypassing' the transform on
'ee'.  So if the rectangle is rotated by setting it's transform attribute
(as opposed to a parent's transform attribute) then your mapping of
ClientX/Y will be to the wrong coordinate system.  The 'x'/'cx' & 'y'/'cy'

attributes are in the local coordinate system of the element (after it's
transform has been applied).


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@...
For additional commands, e-mail: batik-users-help@...