Re: Movable elements and events

[jonathan wood <jo...@gmail.com>]

Here's an oversimplified example.... it has embedded javascript, but the
calls are virtually the same.  You'll need to merge the new translate with
the existing transform in more complex applications .

Hope it helps

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg version="1.1" width="100%" height="100%" xmlns="
http://www.w3.org/2000/svg" onload="init()" pointer-events="all">
    <script type="text/ecmascript">
        <![CDATA[
        var drag = false;
        var svg;
        var draggable;

        function init(e) {
            svg = document.documentElement;
            var rect = document.getElementById("draggable");
            rect.addEventListener("mousedown", md, false);
            svg.addEventListener("mousemove", mm, false);
            svg.addEventListener("mouseup", mu, false);
        }

        function md(e) {
            drag = true;
            draggable = e.currentTarget;
        }

        function mu(e) {
            drag = false;
        }

        function mm(e) {
            if (drag) {
                var p = getPoint(e);
                var m = svg.createSVGMatrix().translate(p.x, p.y);
                var transform = "matrix(" + m.a + " " + m.b + " " + m.c + "
" + m.d + " " + m.e + " " + m.f + ")";
                draggable.setAttributeNS(null, "transform", transform);
            }
        }

        function getPoint(e) {
            var p = svg.createSVGPoint();
            p.x = e.clientX;
            p.y = e.clientY;
            p = p.matrixTransform(svg.getScreenCTM().inverse());
            return p;
        }
        ]]>
    </script>
    <rect id="background" x="0" y="0" width="100%" height="100%" fill="#BBB"
stroke="#000" />
    <rect id="draggable" x="0" y="0" height="100" width="100"
fill="cornflowerblue"/>
</svg>

On Tue, Aug 31, 2010 at 2:11 PM, shootist <kw...@gmail.com> wrote:

>
> An example would be great.  I'm very new to svg and batik (I just started
> using it), and there are a number of things I need to implement if it's
> even
> possible.  I managed to get a movable element working last night, but I'm
> positive it's not the best implementation possible.
>
> How would you suggest setting the location of the elements?  I need to
> translate the on screen coordinates to and from a real world coordinate
> system using ratios so I will need access to some sort of concrete
> coordinate.
>
> As for the translation, I found some code that does it differently.  Is
> there a down side to this compared to your suggestion?
>
> SVGOMPoint pt = new SVGOMPoint(e.getX(), e.getY());
> SVGMatrix mat = this.getSVGDocument().getRootElement().getScreenCTM();  //
> elem -> screen
> mat = mat.inverse();                  // screen -> elem
> pt = (SVGOMPoint) pt.matrixTransform(mat);
>
> Again, thank you for the help.
>
>
>
> jonathan wood-3 wrote:
> >
> > I've always had alot of success adding my draggable Elements to a parent
> > <g>
> > with pointer-events="all".  Place the mousemove listener on the
> containing
> > <g>. If you capture the point in mousedown (p1), you can use p1 and the
> > mousemove point (p2, likely transformed to the correct coord system) to
> > determine the appropriate transform to apply
> > (AffineTransform.getTranslateInstace(p2.x - p1.x, p2.y - p1.y)).
> >
> > I'd caution you against trying to use absolute x,y attribute sets as this
> > approach is not feasible in complex implementations. (Just in case your
> on
> > that path...)
> >
> > I can likely provide an example in short order if you want a spoiler
> >
> > On Mon, Aug 30, 2010 at 11:05 AM, shootist <kw...@gmail.com>
> wrote:
> >
> >>
> >> I tried finding a post here with a similar issue but had no luck.  I am
> >> attempting to create movable icons using an image element.
> >>
> >> If I add the event listener directly to the image element, it does work
> >> but
> >> if you move the mouse fast, you of course get outside the element and
> >> lose
> >> the listener (painting can not keep up with the events).
> >>
> >> If I add the event listener to the root element, and check for the
> >> element
> >> type, it managed to find the type of elements I want and change the
> >> cursor
> >> on mouseover like it should.  But, it will not move the element.
> >>
> >> Troubleshooting
> >> One interesting thing I noticed, is when I print ((Element)
> >> evt.getCurrentTarget()).getTagName() I get svg when the listener is
> added
> >> to
> >> the root, and image when the listener is added to the image element
> only.
> >> This would make sense to me if I wasn't able to distinguish between
> >> elements
> >> and only mouse over on the image elements (I added a tag called movable
> >> and
> >> can check that the element has that tag and only change the cursor for
> >> those
> >> elements).
> >>
> >> Any ideas as to what I'm doing wrong?  Or is there a better way to
> create
> >> movable elements?  Thanks in advance for any help.
> >>
> >> --
> >> View this message in context:
> >>
> http://old.nabble.com/Movable-elements-and-events-tp29573506p29573506.html
> >> Sent from the Batik - Users mailing list archive at Nabble.com.
> >>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> >> For additional commands, e-mail:
> batik-users-help@xmlgraphics.apache.org
> >>
> >>
> >
> >
>
> --
> View this message in context:
> http://old.nabble.com/Movable-elements-and-events-tp29573506p29586021.html
> Sent from the Batik - Users mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>
>