Find center of scale (inside viewport), given two transforms (center of enlargement)

Question

The problem: A object is scaled inside my viewport. I know scale, size and position before and after thescale. I do not know the center of enlargement - it is what I want to find.

My data types:

transform t =  {x: 0, y: 0, kx: 1, ky: 1}

x, y => offset of object to viewport origin

kx, ky => x and y scale of the object

Data i have:

var sizeOfViewport = {width, height}
var originalSizeOfObject = {width, height} // in my case same as viewport size
var transformBefore // offset to viewport origin and scale
var transformAfter // offset to viewport origin and scale

So given the two transforms describing the size and position of the original and the scaled object and the size of the viewport - how can I find out the center of enlargement.. For example if the object was scaled from a mouse position - how to find out where the mouse was during the scale..?

Answer 1

We have transforms T1 (before) and T2 (after). From these, we can calculate the relative transform T, such that (assuming column vector convention):

T2 = T * T1
 T = T2 * T1^-1

Then, we want to find the center of this relative transform. Inserting the transform variables, we get:

    / kx2   0   x2 \   / kx1   0   x1 \^-1
T = |  0   ky2  y2 | * |  0   ky1  y1 |
    \  0    0    1 /   \  0    0    1 /

    / kx2   0   x2 \   / 1/kx1   0    -x1/kx1 \
  = |  0   ky2  y2 | * |   0   1/ky1  -y1/ky1 |
    \  0    0    1 /   \   0     0       1    /

    / kx2/kx1     0      -kx2 * x1 / kx1 + x2 \
  = |    0     ky2/ky1   -ky2 * y1 / ky1 + y2 |
    \    0        0                1          /

Now the center c is the fix point of this transform. I.e. T * c = c. In other words, it is the eigenvector corresponding to eigenvalue 1. And this is:

 c = / (-kx2 * x1 + kx1 * x2) / (kx1 - kx2) \
     \ (-ky2 * y1 + ky1 * y2) / (ky1 - ky2) /