More from the DragTutorial!

 

(On options for moving elements)

 

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

 

Assuming that I’ve already placed a “transform” attribute on every element I create, the initial transform doesn’t hold true.  However, you can’t simply append oldTransformCoordinate + newCoordinate; rather you need to add the delta between MouseMove events.  This is the solution I’m unsuccessfully pursuing.  Is there a desktop solution?  The Adobe SVG viewer is mostly _javascript_.  Can the JSVGCanvas handle changing the transform on an object for every MouseMove events?  Does an example exist?  I’ve read that transforms are pretty costly operations.  If it can’t be done, I may need to use a 2D shape on the glass pane and only change the element when the mouse is released; resulting in one element change instead of having the document render every time I move the mouse.

 

Michael Bishop

 


From: Bishop, Michael W. CONTR J9C880 [mailto:[EMAIL PROTECTED]
Sent: Wednesday, October 26, 2005 11:10 AM
To: [email protected]
Subject: RE: Weird problem using translations.

 

OK, I have more of an idea as to what’s going on; it seems that MouseMotionListeners are more “precise” than EventListeners.  I capture the “delta” between the the “current” MouseEvent coordinates and the “previous” MouseEvent coordinates.  The mouse seems to move further than the DOM EventListener registers.  The MouseMotionListener keeps up just fine:

 

Move Delta X: 0

Move Delta Y: -1

DOM Delta X: 0.0

DOM Delta Y: 0.0

Move Delta X: 0

Move Delta Y: -1

DOM Delta X: 0.0

DOM Delta Y: 0.0

 

Just a small snippet, but this is the kind of output I get.  Eventually the mouse gets “ahead” of the element being dragged and strange things start to happen.  Are there any examples out there that use transformations to achieve drag and drop?  I had better success setting the coordinates of the element directly, but as Thomas pointed out it’s more work.  For a rectangle, it’s X/Y.  For an ellipse, it’s CX/CY.  For a line it’s TWO points and for a polyline it’s “n” points.  I’d rather use transformations, but I’m running out of troubleshooting ideas.

 

Michael Bishop

 


From: Bishop, Michael W. CONTR J9C880 [mailto:[EMAIL PROTECTED]
Sent: Tuesday, October 25, 2005 4:57 PM
To: [email protected]
Subject: Weird problem using translations.

 

I sure hope I can describe this one without pictures.  I’ve started to use the “translate” attribute to move elements around the JSVGCanvas.  I have a DragStatus object that keeps track of what I’m dragging.  Here is what my code is doing:

 

MouseDown:

            Set DragStatus.dragStatus to DRAG_DOWN.

Capture the Element I pressed the mouse on and save it as the DragStatus.selectedElement.

Capture the coordinates of where the mouse was pressed and save it as the DragStatus.dragDownPoint.

 

MouseMove:

            Capture the current DOMMouseEvent coordinates as an SVGOMPoint and convert from screen coordinates.

            Run a MoveRunnable Runnable in the UpdateManager, sending the SVGOMPoint and the DragStatus.selectedElement.

 

MoveRunnable(Element element, SVGOMPoint location):

            Create an instance of WhiteboardElement(element) which is what I use to “wrap” elements.  Subclasses (RectangleElement, EllipseElement, etc.) know how to generate color information, transforms, etc. for the wrapped Element.

 

            Set the new “translate” piece of the “transform” attribute as follows:

 

// Set the “new” translation coordinates as [current element translate coordinates] + [current mouse coordinates] – [mouse coordinates of mouse press].

float translateX = (whiteboardElement.getTranslateX().floatValue() + location.getX() – DragStatus.getDragDownPoint().getX());

float translateY = (whiteboardElement.getTranslateY().floatValue() + location.getY() – DragStatus.getDragDownPoint().getY());

 

// Set class variables for X and Y translations.

whiteboardElement.setTranslateX(new Double(translateX));

whiteboardElement.setTranslateY(new Double(translateY));

 

// Set the “transform” attribute of the actual Element (triggering the change to the document I think.

whiteboardElement.addTransform();

 

All of this “sort of” works.  With slow mouse moving, you get kind of jerky motion across the canvas.  Any sudden mouse movements cause the element to “fly off” the canvas on its own.  It’s especially apparent with lines and polylines.  I *think* the trigger is moving the mouse far enough to register a “mouse moved” event when the mouse is “off” the element you’re dragging.

 

Any suggestions?  Smoother motion would be nice; the element seems to “wobble” when you move it, but stopping it from flying off the canvas entirely would be very helpful.  I’ve been pulling my hair out for the better part of the afternoon…J

 

Michael Bishop

Reply via email to