You need to implement listeners for the mouseevents:
public void registerListeners() {
// Gets an element from the loaded document.
// document is your SVGDocument
elt = document.getElementById("The_Group_ID_That_holds_the_movable_Elements");
EventTarget t = (EventTarget)elt;
// Adds 'mouseevent' listeners
t.addEventListener("mousedown", new OnDownAction(), false);
t.addEventListener("mousemove", new OnMoveAction(), false);
t.addEventListener("mouseup", new OnUpAction(), false);
t.addEventListener("mouseover", new OnOverAction(), false);
t.addEventListener("click", new OnClickAction(), false);
}Next, you need to register a global variable with the state of the DRAG operation, and the initial drag point:
protected int drag; protected Element selectedItem; protected SVGOMPoint initialDragPoint; protected final int DRAG_UP = 0; protected final int DRAG_DOWN = 0;
Next, in the onmousedown event, you set the "drag" variable to DRAG_DOWN:
public class OnDownAction implements EventListener {
public void handleEvent(Event evt) {
//perform select, deselect operations, etc...
// i.e. assign or validate that you have a draggable item in the "selectedItem" object
drag = DRAG_DOWN;
// Set the initial drag point
DOMMouseEvent elEvt = (DOMMouseEvent)evt;
int nowToX = elEvt.getClientX();
int nowToY = elEvt.getClientY();// Convert Screen coordinates to Document Coordinates.
SVGOMPoint pt = new SVGOMPoint(nowToX, nowToY);
SVGMatrix mat = thisNode.getScreenCTM(); // elem -> screen
mat = mat.inverse(); // screen -> elem
initialDragPoint = (SVGOMPoint)pt.matrixTransform(mat);
} }
Now, on mouse up, finalize the drag operation:
public class OnUpAction implements EventListener {
public void handleEvent(Event evt) {
drag = DRAG_UP;
}
}And Finally, the core of the drag:
public class OnMoveAction implements EventListener {
public void handleEvent(Event evt) {
if (drag == DRAG_DOWN) {
//Cast the event onto a Batik Mouse event, co we can get ccordinates
DOMMouseEvent elEvt = (DOMMouseEvent)evt;
int nowToX = elEvt.getClientX();
int nowToY = elEvt.getClientY();
//convert it to a point for use with the Matrix
SVGOMPoint pt = new SVGOMPoint(nowToX, nowToY);
//Get the item�s screen coordinates, and apply the transformation
SVGMatrix mat = ((SVGLocatable)evt.getTarget()).getScreenCTM(); // elem -> screen
mat = mat.inverse(); // screen -> elem
SVGOMPoint dragpt = (SVGOMPoint)pt.matrixTransform(mat);
/* Now to actually move the objects, there are several approaches:
a.) If they are individual elements (i.e. no <g>�s), you can simply modify the element
attributes X, Y. by "element.setAttribute("x", ""+ dragpt.getX());"
b.) You can iterate though all the elements in the selection (in case of multiple selections or
<g> elements) and individually change the x, y attributes of each item, as in a.)
c.) You can apply a transform on your selected element. To do so you need to perform a matrix
transform from previous transforms this object has had. For example, the first time you drag an object,
you will add a transform attribute such as: transform="translate(dragpt.x, dragpt.y)", but for subsequent
drag operations you need to do, for each axis: oldtransformCoordinate + newCordinate"
For a fully functional example of this approach, you can see the Adobe SVGDraw application, found
at: http://www.adobe.com/svg/demos/svgDraw/svgDraw/index.html
Although this demo is purely Javascript-Adobe SVG Viewer application, you may learn a lot at
how to handle the DOM and perform multiple operations. Pay specific attention to the Matrix transform
methods.
To analyze easily the Javascript code, i recommend the Eclipse IDE v3.0.2 with the jseditor plugin
(sourceforge.net/projects/jseditor)
*/
}
}
}Regards,
Andres.
On Apr 14, 2005, at 5:56 AM, bader houmad wrote:
Hi,
I know there is a way to move a shape from a place to another, with a matrix. can somebody tell me how to do?
In my application I can select a node (a rectangle) in�the JSVGCanvas, and I want to�move�it with the mouse.
thanks for ur help in advance
bader
MSN Hotmail : choisissez votre adresse @hotmail.fr --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
--------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
