how to move a OMSVGTextElement effectively? or add text on top of a OMSVGImageElement?

[dai tran]

Hello,

I could not figure out how to solve my problem:

I need to draw some kind of router image which haves dynamic IP address and I want to show that ip of top of the image.

And my router image can move around by using mouse handler.

basically I draw 2 elements together (text and image), when I move the image -> I add code to move the text with it.

but it seems a bit weird, hacky, slow and not position nicely on top of my image, here is the code that move the text:

                OMSVGSVGElement svg = new OMSVGSVGElement();

OMSVGLength xCoord = svg.createSVGLength((short) 1, x - shape.getWidth().getBaseVal().getValue() / 4);

textShape.getX().getBaseVal().clear();

textShape.getX().getBaseVal().appendItem(xCoord);

OMSVGLength yCoord = svg.createSVGLength((short) 1, y);

textShape.getY().getBaseVal().clear();

textShape.getY().getBaseVal().appendItem(yCoord);

You see that I need to call clear() 2 times for X and Y, otherwise the text show strange behavior -> Could you suggest me a better code for moving the textElement?

I also try to use transformation, but the text moves out of screen immediate (??)

                OMSVGPoint afterMovePoint = getLocalCoordinates(event);

OMSVGSVGElement svg = textShape.getOwnerSVGElement();

OMSVGTransformList transforms = textShape.getTransform().getBaseVal();

OMSVGTransform t = svg.createSVGTransform();

t.setTranslate(event.getX(), event.getY());

transforms.appendItem(t);

I also think of another solution is add the text to the Image and put it on top, but then I think I need to enlage the image layer, and move all elements inside the image down to show the text,

Is it right? can this solution viable?

Thank you

 

[Lukas Laag]

Hi,
My advice would be to create a group (OMSVGGElement) and to put your image and text in the group so that you can consider it as a single entity. Then you change the transform of you group to position it.

OMSVGGElement g = new OMSVGGElement();
g.appendChild(yourImage);
g.appendChild(yourText);
OMSVGSVGElement svg = ...;
OMSVGTransform t;
t = svg.createSVGTransform();
OMSVGTransformList xforms = g.getTransform().getBaseVal();
xforms.appendItem(t);
t.setTranslate(100, 100);

Lukas

--
You received this message because you are subscribed to the Google Groups "lib-gwt-svg" group.
To unsubscribe from this group and stop receiving emails from it, send an email to lib-gwt-svg...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[dai tran]

Thank you, i will try it out.

And really good job with this library, I love it so far, just sometime I find it  not much tutorial available.

But it is our job to figure it out then, he

Best.