You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by shootist <kw...@gmail.com> on 2010/08/30 17:05:27 UTC
Movable elements and events
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
Re: Movable elements and events
Posted by 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
>
>
Re: Movable elements and events
Posted by shootist <kw...@gmail.com>.
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
Re: Movable elements and events
Posted by jonathan wood <jo...@gmail.com>.
forgot to give my 2 cents on the below...
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).
>>
>>
You are likely getting the bubbled event call on the root element. If both
the element and root have an event listener, you may need to check the
result of event.getCurrentTarget(). Also check out event.stopPropagaton() as
it may be very useful to you.
Re: Movable elements and events
Posted by jonathan wood <jo...@gmail.com>.
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
>
>