Existen dos maneras diferentes de obtener y cambiar el tamaño y la posición de un elemento de página:
- Usar las funciones get y set para el tamaño y la posición
- Manipular su transformación afín con las funciones
getTransform()ysetTransform()mientras se conserva el tamaño inherente
Cómo leer las propiedades de los elementos de página
Como se muestra en la figura, el tamaño y la posición se miden con respecto al cuadro de límite de un elemento de página renderizado cuando no tiene rotación:
- Izquierda y Arriba: Se mide desde la esquina superior izquierda de la página hasta la esquina superior izquierda del cuadro de límite sin rotar. Usa
getLeft()ygetTop()para leer los valores. - Ancho y Altura: Es el ancho y la altura del cuadro de límite sin rotar.
Usa
getWidth()ygetHeight()para leer los valores. - Rotación: La rotación en el sentido de las manecillas del reloj con respecto a la línea vertical alrededor del centro del cuadro delimitador. Usa
getRotation()para leer el valor.
Todas las longitudes se miden en puntos (pt). La rotación se mide en grados (°).
Cómo configurar las propiedades de los elementos de página
Puedes configurar el tamaño y la posición de un elemento de página cuando lo creas con un método de inserción, como insertShape(). En el caso de una forma existente, puedes configurar el tamaño, la posición y la rotación; también puedes configurar el escalamiento de un elemento para cambiar su tamaño o reflejarlo en uno de sus bordes.
Durante la creación
Puedes proporcionar información sobre la posición y el tamaño cuando creas un elemento de página.
var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 100, 200, 300, 60);
Logger.log('Left: ' + shape.getLeft() + 'pt; Top: '
+ shape.getTop() + 'pt; Width: '
+ shape.getWidth() + 'pt; Height: '
+ shape.getHeight() + 'pt; Rotation: '
+ shape.getRotation() + ' degrees.');
La secuencia de comandos anterior crea una forma en la primera diapositiva de la presentación activa con la posición y el tamaño especificados y lee la información de posición y tamaño de la forma. El registro esperado es el siguiente:
Left: 100pt; Top: 200pt; Width: 300pt; Height: 60pt; Rotation: 0 degrees.
Tamaño, posición y rotación
Puedes actualizar el tamaño y la posición de un elemento de página después de crearlo:
- Usa
setLeft()ysetTop()para establecer la posición de la esquina superior izquierda del cuadro de límite sin rotar. - Usa
setWidth()ysetHeight()para establecer el ancho y la altura renderizados del cuadro de límite. - Usa
setRotation()para establecer la rotación en el sentido de las manecillas del reloj del cuadro delimitador alrededor de su centro.
La siguiente secuencia de comandos crea una forma en la primera diapositiva de la presentación activa, usa métodos set para actualizar su posición, tamaño y rotación, y lee la información sobre la posición y el tamaño de la forma.
var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setLeft(100).setTop(200).setWidth(50).setHeight(60).setRotation(90);
Logger.log('Left: ' + shape.getLeft()
+ 'pt; Top: ' + shape.getTop()
+ 'pt; Width: ' + shape.getWidth()
+ 'pt; Height: ' + shape.getHeight()
+ 'pt; Rotation: ' + shape.getRotation() + '\u00B0.');
El resultado esperado del registro de esta secuencia de comandos es el que se muestra a continuación:
Left: 100pt; Top: 200pt; Width: 50pt; Height: 60pt; Rotation: 90°.
Los métodos set de tamaño, posición y rotación se pueden usar en cualquier orden o combinación. Si reemplazas la tercera línea anterior por la siguiente secuencia de comandos, obtendrás el mismo resultado:
shape.setWidth(55);
shape.setRotation(90).setHeight(60).setLeft(100);
shape.setWidth(50).setTop(200);
Escalamiento
En lugar de usar setWidth() y setHeight() anteriores para establecer el tamaño de la forma en un valor absoluto, se pueden usar scaleWidth() y scaleHeight() para estirar o apretar un elemento de página con un factor de escala relativo.
shape.scaleHeight(0.5).scaleWidth(2);
En la siguiente figura se muestra cómo funciona el código anterior en una forma cuadrada con rotación de 45°. Ten en cuenta que la esquina superior izquierda del cuadro delimitador se fija durante el escalamiento.
Reflejo en el borde
El argumento de scaleWidth() y scaleHeight() puede ser negativo, por lo que se puede usar para girar un elemento de página de forma horizontal o vertical.
shape.scaleWidth(-1); // Flip horizontally along the left edge of the bounding box.
shape.scaleHeight(-1); // Flip vertically along the top edge of the bounding box.
En la siguiente figura se muestra cómo funciona el código anterior en una forma con rotación de 45°. Ten en cuenta que el elemento de la página se invierte a lo largo de uno de los bordes del cuadro de límite, pero no en el centro.
Rotación de línea
Al igual que otros elementos de página, la rotación de una línea no es el ángulo vertical de la línea, sino la rotación de su cuadro de límite. Cuando creas una línea con puntos de inicio y finalización especificados, la rotación siempre es de 0°. Cuando arrastras los extremos de la línea en la IU de Presentaciones de Google, se cambia su ángulo vertical, así como el tamaño y la posición de su cuadro delimitador, pero no cambia su rotación. Si usas setRotation(), se rota el cuadro delimitador de la línea, lo que cambia efectivamente su ángulo vertical. Por lo tanto, dos líneas pueden tener el mismo ángulo vertical visual, pero diferentes cuadros de límite y, por lo tanto, valores de tamaño, posición y rotación diferentes.
Limitaciones
Algunos métodos de tamaño y posicionamiento son incompatibles con algunos tipos de elementos de página. En la siguiente tabla, se resumen los métodos que no son compatibles con ciertos tipos de elementos de página.
| Métodos | Forma | Video | Tabla |
|---|---|---|---|
| getHeight(), getWidth() | ✔ | ✔ | NO (muestra un valor nulo) |
| setHeight(), setWidth() | ✔ | ✔ | NO |
| setRotation() | ✔ | NO | NO |
| scaleHeight(), scaleWidth() | ✔ | ✔ | NO |
Todos los métodos de tamaño y posicionamiento pueden dar resultados inesperados si se produce una distorsión en el elemento de la página. Todas las limitaciones están sujetas a cambios. Consulta la referencia para obtener información actualizada.
Usa transformaciones afines
Para un control avanzado, el tamaño y la posición de un elemento de página también se pueden calcular y ajustar mediante su tamaño inherente (nativo) y su transformación afín.
Google Apps Script ofrece una interfaz similar para usar una transformación afín a la de la API de Presentaciones de Google.
- Para leer, en este artículo se explican los conceptos de transformación afín y cómo inferir el tamaño renderizado a partir del tamaño inherente (nativo) y la transformación de elementos de página. En Apps Script, usa lo siguiente:
getInherentWidth()ygetInherentHeight()para el tamaño nativo de los elementos de páginagetTransform()para la transformación afín de los elementos de página
- Para escribir, en este artículo, se describe cómo ajustar el tamaño y la posición de los elementos de página mediante la transformación afín a fin de lograr escalamiento, rotación, reflexión, etc. En Apps Script, usa
setTransform()para establecer la transformación afín de los elementos de página (similar al modo ABSOLUTE)preconcatenateTransform()para concatenar previamente una transformación afín a la transformación actual de los elementos de página (similar al modo RELATIVO).
La siguiente secuencia de comandos crea una forma, establece su transformación, lee su tamaño inherente y lee su transformación afín.
var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setTransform(SlidesApp.newAffineTransformBuilder()
.setScaleX(2)
.setScaleY(1)
.setTranslateX(100)
.setTranslateY(200)
.build());
Logger.log('Inherent width: ' + shape.getInherentWidth()
+ 'pt; Inherent height: '
+ shape.getInherentHeight() + 'pt.');
El resultado esperado del registro de esta secuencia de comandos es el que se muestra a continuación:
Inherent width: 236.2pt; Inherent height: 236.2pt.
La forma resultante tendrá la siguiente transformación, y se renderizará el tamaño y la posición:
AffineTransform{scaleX=2.0, scaleY=1.0, shearX=0.0, shearY=0.0, translateX=100.0, translateY=200.0}
Left: 100pt; Top: 200pt; Width: 472.4pt; Height: 236.2pt; Rotation: 0°.