Cálculo de la traslación de una matriz afín para que se centre durante el escalado

Question

Tengo este ejemplo de lo que quiero conseguir. El segundo conjunto de rects es donde quiero llegar.

Hay dos conjuntos de rects en el enlace anterior. El primer conjunto es donde me encuentro actualmente, quiero escalar los elementos svg hacia adentro y hacia afuera. El rectángulo central es la posición inicial y el primer rectángulo es lo que sucede si el usuario se aleja y el último rectángulo es lo que sucede cuando el usuario se acerca.

Quiero que mis rects permanezcan centrados mientras se produce el escalado como se muestra en el segundo conjunto de rects.

Si mi matriz afín de partida tiene este aspecto:

$$\begin{bmatrix}1 & 0 & 0\\0 & 1 & 0\\0 & 0 & 1\end{bmatrix}$$

Si cambio la escala a

$$\begin{bmatrix}0.5 & 0 & 0\\0 & 0.5 & 0\\0 & 0 & 1\end{bmatrix}$$

¿Cuáles son mis cálculos para mantener la traducción del centro para el $x$ y $y$ de la matriz afín para garantizar que los elementos no se desplacen hacia la parte superior izquierda al ampliar o reducir la escala.

El resultado sería algo así:

$$\begin{bmatrix}0.5 & 0 & -22.5\\0 & 0.5 & -22.5\\0 & 0 & 1\end{bmatrix}$$

Los rects tienen una anchura de $50$ y un punto de partida de $(20, 20)$ antes de aplicar cada transformación.

Answer 1

$\def\vec{\boldsymbol}$ Para un entorno general, supongamos que el punto fijo de esta transformación afín es $(x_0, y_0)$ que es el centro en su caso. Como la matriz de escala es $A = \begin{pmatrix}a&0\\0&b\end{pmatrix}$ entonces $$ A \begin{pmatrix}x_0\\y_0\end{pmatrix} + \vec{b} = \begin{pmatrix}x_0\\y_0\end{pmatrix} \Longrightarrow \vec{b} = (I - A) \begin{pmatrix}x_0\\y_0\end{pmatrix} = \begin{pmatrix}(1 - a)x_0\\(1 - b)y_0\end{pmatrix}. $$ Por lo tanto, la matriz de transformación afín es $$ M = \begin{pmatrix}A & \vec{b}\\\vec{0} & 1\end{pmatrix} = \begin{pmatrix}a & 0 & (1 - a)x_0\\0 & b & (1 - b)y_0\\0 & 0 & 1\end{pmatrix}. $$

Answer 2

A continuación se presenta un útil enlace que ilustra cómo diferentes matrices css transforman las esquinas de su rectángulo.

Aquí está mi explicación manuscrita sobre cómo escalar rectángulos y centrarlos para cualquier longitud de escala y tamaño de rectángulo. (Estoy feliz de alojar en el intercambio de pila, es sólo que no parece como si este sitio web soporta archivos .pdf ..)

P.D. si quieres que tus rectángulos tengan un punto de partida en (20, 20), primero dibújalos con un centro de (0, 0), y después de haberlos escalado y centrado, trasládalos todos (usando el operador translate) a (20, 20)