Transformaciones y elementos de página

En esta guía, se describen los conceptos subyacentes que se usan para transformar (es decir, mover, rotar, ajustar y distorsionar) elementos de página, con especial énfasis en la transformación afín subyacente y sus operaciones.

Si deseas obtener más información sobre cómo usar transformaciones afines para obtener resultados específicos, consulta la guía Cómo ajustar el tamaño y la posición de las formas.

El tamaño visual y la posición de un elemento de página se controlan a través de dos propiedades: size y transform. El tamaño describe el tamaño ideal o integrado del elemento de página que se crea. Esta transformación especifica una matriz de transformación afín bidimensional que indica cómo se transforma un objeto en su tamaño integrado para dar como resultado su aspecto visual final.

Diagrama de una forma renderizada a través de una transformación afín

Cuando seleccionas un elemento de página en la IU de Presentaciones y cambias su tamaño visual con los controladores de ajuste, en realidad estás actualizando esta matriz de transformación. Si mueves el elemento en la página o lo rotas, también se actualiza la matriz de transformación del elemento.

Usa la IU de Presentaciones para comenzar

La aritmética matricial que usas para transformar los elementos de página y cambiar su tamaño es muy útil, pero puede ser abrumadora al principio. En la mayor parte de esta página, se describen estos cálculos. Sin embargo, puedes simplificar la especificación de transformaciones y tamaños mediante el siguiente enfoque:

  1. Crear elementos de página usando la IU de Presentaciones
  2. Ajusta la posición de estos elementos de página como desees, usando también la IU de Presentaciones.
  3. Lee el tamaño y la transformación de esos elementos con el método get.

Esto puede ser suficiente para comenzar. En el resto de esta guía, se explican los cálculos de transformación que puedes usar para manipular en detalle los elementos de página.

Matrices de transformaciones afines

Las bibliotecas de gráficos suelen usar matrices de transformaciones afines bidimensionales para controlar la escala, la rotación, la distorsión, la reflexión y la traslación de los elementos. En la API de Presentaciones, la transformación de un elemento de página se representa como una matriz de 3x3:

$$A=\begin{bmatrix} scale\_x & shear\_x & translate\_x\\ shear\_y & scale\_y & translate\_y\\ 0 & 0 & 1 \end{bmatrix}$$

Los parámetros que se usan en la transformación son los siguientes:

translate_x Los parámetros de traducción especifican la posición (X, Y) de la esquina superior izquierda del elemento de página en relación con la esquina superior izquierda de la página. Debes especificar la posición relativa mediante unidades de puntos (pt) o unidades métricas inglesas (EMU).
translate_y
scale_x Los parámetros de escala controlan el tamaño de un elemento de página cuando se renderiza. Estos son factores multiplicadores sin unidades; por ejemplo, un valor de scale_x de 1.5 aumenta el ancho del elemento en un 50%.
scale_y
shear_x Los parámetros de distorsión tampoco tienen unidades y controlan la inclinación de un elemento de página. Los parámetros de escala y distorsión se pueden usar juntos para rotar un elemento de página.
shear_y

Puedes encontrar muchos ejemplos en la Web que muestran cómo las matrices de transformación en 2D afectan la renderización de objetos gráficos.

La matriz de transformación es relativa al grupo o la página que contiene el elemento. Por ejemplo, si rotas un grupo que contiene un rectángulo, los valores del campo transform del grupo reflejan la rotación, pero los valores del campo transform del rectángulo no.

Calcula el tamaño de la imagen

Para determinar el tamaño visual (renderizado) de un elemento de página, debes considerar las propiedades de tamaño y transformación en conjunto. No puedes determinar cuál de los dos elementos de página es visualmente más grande con solo comparar sus propiedades de tamaño: debes asignar los límites del elemento con la matriz de transformación y calcular un tamaño renderizado.

Cómo asignar un punto

Para asignar un punto específico con la matriz de transformación, convierte el punto (x, y) en un vector [x, y, 1] y, luego, realiza la multiplicación de la matriz. Considera asignar un punto p:

\[p' = Ap\]

Esto se convierte en lo siguiente:

$$\begin{bmatrix} x'\\ y'\\ 1 \end{bmatrix} =\begin{bmatrix} scale\_x & shear\_x & translate\_x\\ shear\_y & scale\_y & translate\_y\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix}$$

Por lo tanto, las coordenadas del nuevo punto p' son las siguientes:

$$x' = (scale\_x \times x) + (shear\_x \times y) + translate\_x\\ y' = (scale\_y \times y) + (shear\_y \times x) + translate\_y$$

Calcula el límite

Para determinar el tamaño renderizado del cuadro de límite de un elemento después de una transformación que aplica distorsión y ajuste de tamaño, usa el siguiente código:

$$width' = (scale\_x \times width) + (shear\_x \times height)\\ height' = (scale\_y \times height) + (shear\_y \times width)$$

Si deseas obtener más información sobre cómo usar transformaciones afines para obtener resultados específicos, consulta la guía Cómo ajustar el tamaño y la posición de las formas.

Limitaciones

Algunos campos de tamaño y posicionamiento son incompatibles con algunos tipos de elementos de página. En la siguiente tabla, se resume la compatibilidad de ciertos elementos de página con los campos de tamaño y posicionamiento.

Campo Forma Video Tabla
Translation
Escala No**
Cizalla No No

** Para actualizar las dimensiones de las filas y columnas de la tabla, usa UpdateTableRowPropertiesRequest y UpdateTableColumnPropertiesRequest.

Todos los campos de tamaño y posicionamiento pueden dar resultados inesperados si el elemento de página presenta distorsión. Todas las limitaciones están sujetas a cambios. Para obtener información actualizada, consulte la API de Google Slides.