Existen dos maneras diferentes de obtener y cambiar el tamaño y la posición de un elemento de página:
- Usar sus funciones de método get y set para el tamaño y la posición
- Manipular su transformación afín con sus funciones
getTransform()ysetTransform()y, al mismo tiempo, preservar el tamaño intrínseco
Cómo leer propiedades de elementos de página
Como se muestra en la figura, el tamaño y la posición se miden en relación con el cuadro de límite de un elemento de página renderizado cuando no tiene rotación:
- Izquierda y Arriba: Se miden 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. - Width y Height: El ancho y la altura del cuadro delimitador 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 establecer 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 establecer el tamaño, la posición y la rotación. También puedes establecer la escala de un elemento para cambiar su tamaño o reflejarlo a lo largo de uno de sus bordes.
Durante la creación
Puedes proporcionar información de posición y 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 seters para actualizar su posición, tamaño y rotación, y lee la información de posición y 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 del registro esperado de esta secuencia de comandos es el siguiente:
Left: 100pt; Top: 200pt; Width: 50pt; Height: 60pt; Rotation: 90°.
Los 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, se producirá 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 comprimir un elemento de página con un factor de escalamiento relativo.
shape.scaleHeight(0.5).scaleWidth(2);
En la siguiente imagen, se muestra cómo funciona el código anterior en una forma cuadrada rotada 45°. Ten en cuenta que la esquina superior izquierda del cuadro de límite se fija durante el escalamiento.
Reflexión a lo largo del borde
El argumento de scaleWidth() y scaleHeight() puede ser negativo para que se puedan usar para voltear un elemento de página horizontal o verticalmente.
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 imagen, se muestra cómo funciona el código anterior en una forma rotada 45°. Ten en cuenta que el elemento de página se invierte a lo largo de uno de los bordes de su cuadro de límite, pero no en su centro.
Rotación de línea
Al igual que otros elementos de la 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 final especificados, su rotación siempre es de 0°. Arrastrar los extremos de la línea en la IU de Presentaciones de Google cambia su ángulo vertical, así como el tamaño y la posición de su cuadro de límite, pero no cambia su rotación. El uso de setRotation() rota el cuadro de límite de la línea, lo que cambia de manera efectiva 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, diferentes valores de tamaño, posición y rotación.
Limitaciones
Algunos métodos de tamaño y posicionamiento no son compatibles 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 (devuelve un valor nulo) |
| setHeight(), setWidth() | ✔ | ✔ | NO |
| setRotation() | ✔ | NO | NO |
| scaleHeight(), scaleWidth() | ✔ | ✔ | NO |
Todos los métodos de tamaño y posicionamiento pueden generar resultados inesperados si el elemento de página tiene corte. Todas las limitaciones están sujetas a cambios. Consulta la referencia para obtener información actualizada.
Usa transformaciones afines
Para el control avanzado, el tamaño y la posición de un elemento de página también se pueden calcular y ajustar a través de su tamaño intrínseco (nativo) y la transformación afín.
Google Apps Script proporciona una interfaz similar para usar la transformación afín como la API de Presentaciones de Google.
- En este artículo, se explican los conceptos de la transformación afín y cómo inferir el tamaño renderizado a partir del tamaño intrínseco (nativo) y la transformación de los elementos de página. En Apps Script, usa
getInherentWidth()ygetInherentHeight()para el tamaño nativo de los elementos de página.getTransform()para la transformación afín de los elementos de la 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 con la transformación afines para lograr el escalamiento, la rotación, la reflexión, etc. En Apps Script, usa
setTransform()para establecer la transformación afín de los elementos de la página (similar al modo ABSOLUTE).preconcatenateTransform()para preconcatenar una transformación afín a la transformación actual de los elementos de página (similar al modo RELATIVE).
La siguiente secuencia de comandos crea una forma, establece su transformación, lee su tamaño intrínseco 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 del registro esperado de esta secuencia de comandos es el siguiente:
Inherent width: 236.2pt; Inherent height: 236.2pt.
La forma resultante tendrá la siguiente transformación y el tamaño y la posición renderizados:
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°.