|
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] 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] 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 |
RE: Weird problem using translations.
Bishop, Michael W. CONTR J9C880 Wed, 26 Oct 2005 12:09:27 -0700
- RE: Weird problem using translations. Bishop, Michael W. CONTR J9C880
- RE: Weird problem using translations. thomas . deweese
- RE: Weird problem using translations. Bishop, Michael W. CONTR J9C880
- RE: Weird problem using translati... thomas . deweese
- RE: Weird problem using translations. Bishop, Michael W. CONTR J9C880
- RE: Weird problem using translati... thomas . deweese
- RE: Weird problem using translations. Bishop, Michael W. CONTR J9C880
- RE: Weird problem using translations. Bishop, Michael W. CONTR J9C880
- RE: Weird problem using translati... thomas . deweese
- RE: Weird problem using translations. Bishop, Michael W. CONTR J9C880
