Zooming to Target Rectangle
A student of mine was telling me about a sticky note app he was working on. When he tapped on a note, he wanted to animate its filling the screen. The drawing library we’re using supports all the standard transformations and includes the ability to set the pivot point about which scaling and rotation occur. We guessed how we might calculate the pivot point, but the problem seemed complicated enough to shelve for the time being.
However, I’m a sucker for a transformation problem. I spent some time thinking about it in 1-D dimension. These are my givens:
- I have a source segment spanning from C to D.
- I have a destination segment spanning from A to B.
- When I scale CD about the pivot P, I want it to eventually align to AB.
Somehow I needed to calculate P. After a few wrong turns, I realized that this was a similarity problem. Traveling from P to C was a certain proportion of traveling from P to A. Traveling from P to D was also a certain proportion of traveling from P to B. The correct P would make these proportions equal, so that as we scaled up CD around P, C would reach A and D would reach B at the same time.
After setting up my ratios, I was able to solve for P:
This only solves for the pivot point in one dimension. The pivot coordinate for other dimensions can be found similarly, using the other dimensions’ source and destination bounds.
I tested the calculation in two-dimensions with a little HTML5 canvas. One can randomly place a red source rectangle and zoom it into fit the destination black rectangle.