Dragging Bounds After Rotation
Ah, finally! Some code to give away! I was recently asked to develop a prototype for a friend. I don’t mind helping someone out, but my general policy is that if I do something free for one person, then I do it for everyone. All such developments are performed with the understanding that I reserve the right to post results to my blog.
This particular prototype dealt with simple dragging inside bounds with the twist that the rectangular item (most often an image) could be rotated about its upper, left-hand registration point yet still dragged only within the prescribed bounds. This was accomplished with a DraggableItem class that extends MovieClip. The visual symbol is associated with an instance of this class. Rectangular bounds are assigned and the DraggableItem class dispatches events on start drag, end drag, and collision with a boundary.
Bounds are in parent space and the DraggableItem rotation method recomputes the axis-aligned bounding box after rotation. The demo draws the AABB during rotation.
The computations are a simple application of trig and the entire demo could be ported to a number of environments. I may convert this to html/js and deconstruct the math in a subsequent series of posts. In the mean time, realize that like most demos, this one was created hastily and only lightly tested. Documentation is sparse, so you are on your own for the deconstruction. There may be an issue or two that requires polishing (for example, you can rotate the visual symbol beyond bounds) and I invite people to make this demo better. That’s what open source is all about🙂