Existen dos formas diferentes de obtener y cambiar el tamaño y la posición de un elemento de página:
- Uso de las funciones de método get y set para el tamaño y la posición
- Manipular su transformación afín mediante sus funciones
getTransform()ysetTransform(), a la vez que se preserva 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 Superior: 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. - Ancho y Altura: El ancho y la altura del cuadro de límite sin rotar.
Usa
getWidth()ygetHeight()para leer los valores. - Rotación: Es 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 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 a lo largo de 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.');
Con la secuencia de comandos anterior, se crea una forma en la primera diapositiva de la presentación activa con la posición y el tamaño especificados, y se 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 su creación:
- Usa
setLeft()ysetTop()para establecer la posición de la esquina superior izquierda del cuadro de límite no rotado. - 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 de límite 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 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 de registro esperado de esta secuencia de comandos es como 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 de arriba con 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 comprimir 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 rotada a 45°. Ten en cuenta que la esquina superior izquierda del cuadro de límite se fija durante el ajuste.
Reflejo a lo largo del borde
El argumento en scaleWidth() y scaleHeight() puede ser negativo, de modo que se pueda usar para invertir un elemento de página en sentido 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 girada a 45°. Ten en cuenta que el elemento de página está invertido a lo largo de uno de los bordes del cuadro delimitador, 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 del cuadro delimitador. Cuando creas una línea con puntos de inicio y finalización 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 delimitador, pero no cambia su rotación. Cuando usas setRotation(), se rota el cuadro delimitador de la línea, lo que cambia de forma 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, valores de tamaño, posición y rotación distintos.
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 nulo) |
| setHeight(), setWidth() | ✔ | ✔ | NO |
| setRotation() | ✔ | NO | NO |
| scaleHeight(), scaleWidth() | ✔ | ✔ | NO |
Todos los métodos de tamaño y posicionamiento pueden dar resultados inesperados si el elemento de página tiene distorsión. 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 mediante su tamaño inherente (nativo) y la transformación afín.
Google Apps Script proporciona una interfaz similar para usar la transformación afín y la API de Presentaciones de Google.
- Para leer, 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 y la transformación inherentes (nativos) de los elementos de página. En Apps Script, usa
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 con la transformación afín para lograr el escalamiento, la rotación, el reflejo, 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 preconcatenar una transformación afín a la transformación actual de los elementos de página (similar al modo RELATIVE)
Con la siguiente secuencia de comandos, se crea una forma, se configura su transformación, se lee su tamaño inherente y se 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 de registro esperado de esta secuencia de comandos es como se muestra a continuación:
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°.