Batik Drag Tutorial: How to move shapes in the Canvas

The code provided is a snippet with suggestions, on how to implement a drag operation in a JSVGCanvas. It is identical as the post I submitted in the Batik Mail list. A more detailed drag tutorial is in the works, with explanations about how to handle draggable <g> elements and the transform/translate attribute.

The Post

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 (And define "thisNode" element)
		

                //For example, "thisNode" can be:
                SVGLocatable thisNode = (SVGLocatable)evt.getTarget();

                //End of example. The variable thisNode has the element
                // that is the draggableItem. It can be a single Element
                // or a G element.  If you are interested in a G element
                // you may need a method to locate the desired parent
                // of your eventTarget (like parsing the ID attr.) because
                // the eventTarget may only be one single element of a
                // complex shape, and you want to drag the full complex shape.


		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, 
                 //so 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 items screen coordinates, and apply the transformation
                 // elem -> screen
            		SVGMatrix mat = ((SVGLocatable)evt.getTarget()).getScreenCTM();  

            		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)
			*/
		}
	}
}

Display

To do

  • No labels