La API de Google Slides te permite manipular la ubicación, el tamaño y la orientación de un
PageElement
(cuadros de texto, imágenes, tablas y formas básicas) en una página, mientras mantienes las líneas
rectas y conservas los puntos y las líneas paralelas. Esto se conoce como transformaciones afines. En los ejemplos que se muestran aquí, se incluyen algunas operaciones comunes de transformación de elementos de página con el método
presentations.batchUpdate.
En estos ejemplos, se usan las siguientes variables:
- PRESENTATION_ID: Indica dónde proporcionas el ID de la presentación. Puedes descubrir el valor de este ID en la URL de la presentación.
- PAGE_ID: Indica dónde proporcionas el ID del objeto de página. Puedes recuperar el valor de este ID desde la URL o con una solicitud de lectura de la API.
- PAGE_ELEMENT_ID: Indica dónde proporcionas el ID del objeto del elemento de página. Puedes especificar este ID para los elementos que creas (con algunas restricciones) o permitir que la API de Slides cree uno automáticamente. Los IDs de los elementos se pueden recuperar a través de una solicitud de lectura de la API.
Estos ejemplos se presentan como solicitudes HTTP para que sean independientes del lenguaje. Para obtener información sobre cómo implementar una actualización por lotes en diferentes lenguajes con las bibliotecas cliente de la API de Google, consulta Cómo agregar formas y texto.
Ejemplo de forma de flecha
En los siguientes ejemplos, se supone que existe un elemento de página de forma de flecha de ejemplo con los siguientes datos de tamaño y transformación (que se pueden encontrar con una
presentations.pages.get
solicitud del método). La forma de ejemplo usa las unidades de medida
unit EMU (unidad métrica inglesa) y pt
(punto).
{
"objectId": PAGE_ELEMENT_ID,
"size": {
"width": {
"magnitude": 3000000,
"unit": "EMU"
},
"height": {
"magnitude": 3000000,
"unit": "EMU"
}
},
"transform": {
"scaleX": 0.3,
"scaleY": 0.12,
"shearX": 0,
"shearY": 0,
"translateX": 2000000,
"translateY": 550000,
"unit": "EMU"
},
"shape": {
"shapeType": "RIGHT_ARROW"
}
}Cómo alinear un elemento con otro
En el siguiente
presentations.batchUpdate
ejemplo de código, se muestra cómo usar el método
CreateShapeRequest
para crear formas nuevas en las posiciones correctas que están alineadas con la forma de flecha de
ejemplo en la página. En ambos casos, se deben calcular las coordenadas X y Y de la esquina superior izquierda de la forma nueva.
La primera solicitud crea un rectángulo de 100 por 50 pt que está alineado con el borde izquierdo de la forma de flecha, pero se posiciona 50 pt (50 * 12,700 = 635,000 EMU) por debajo del borde superior de la flecha. La coordenada X del rectángulo nuevo debe ser la misma que la coordenada X de la flecha para mantener alineado su borde izquierdo. La coordenada Y es la misma que la coordenada Y de la flecha más 50 pt, ya que la distancia se mide desde la parte superior de la flecha. Por lo tanto, las coordenadas del rectángulo son las siguientes:
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
La segunda solicitud crea un círculo de 40 pt de ancho que tiene la misma línea central horizontal que la flecha de ejemplo, pero se posiciona 100 pt (1,270,000 EMU) a la derecha del borde derecho de la flecha. La coordenada X del círculo es la suma de la coordenada X de la flecha, el ancho de la flecha y 100 pt. Para aplicar una alineación de línea central al círculo nuevo, se debe tener en cuenta la altura de la flecha y el círculo. La coordenada Y del círculo es la coordenada Y de la flecha más la mitad de la altura de la flecha menos la mitad de la altura del círculo. En ambos casos, también se deben tener en cuenta los factores de escala asociados con la flecha, ya que afectan el ancho y la altura renderizados de la flecha. Por lo tanto, las coordenadas del círculo son las siguientes:
x = 2000000 + (0.3 * 3000000) + (100 * 12700) = 4170000 EMU y = 550000 + (0.5 * 0.12 * 3000000) - (0.5 * 40 * 12700) = 476000 EMU
El siguiente es el protocolo de solicitud para alinear un elemento con otro:
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
"requests": [
{
"createShape": {
"shapeType": "RECTANGLE",
"elementProperties": {
"pageObjectId": PAGE_ID,
"size": {
"width": {
"magnitude": 100,
"unit": "PT"
},
"height": {
"magnitude": 50,
"unit": "PT"
}
},
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 2000000,
"translateY": 1185000,
"unit": "EMU"
}
}
}
},
{
"createShape": {
"shapeType": "ELLIPSE",
"elementProperties": {
"pageObjectId": PAGE_ID,
"size": {
"width": {
"magnitude": 40,
"unit": "PT"
},
"height": {
"magnitude": 40,
"unit": "PT"
}
},
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 4170000,
"translateY": 476000,
"unit": "EMU"
}
}
}
}
]
}Cómo mover un elemento
En el siguiente
presentations.batchUpdate
ejemplo de código, se muestra cómo usar el
UpdatePageElementTransformRequest
método para traducir el elemento de página de forma de flecha de ejemplo de
dos maneras diferentes.
La primera solicitud del lote mueve la flecha a la coordenada (X,Y) = (2000000, 150000)
EMU (con una traducción absoluta
applyMode).
La segunda solicitud del lote mueve la flecha desde allí, esta vez 40,000 EMU
hacia la derecha y 35,000 EMU hacia arriba (con una traducción relativa applyMode).
Las matrices de transformación1 que se usan
se construyen para evitar alterar el tamaño y la orientación del elemento.
Después de ejecutar ambas solicitudes, la esquina superior izquierda de la flecha se encuentra en la coordenada (X,Y) = (2040000, 115000) EMU.
El siguiente es el protocolo de solicitud para mover un elemento:
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
"requests": [
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "ABSOLUTE",
"transform": {
"scaleX": 0.3,
"scaleY": 0.12,
"translateX": 2000000,
"translateY": 150000,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 40000,
"translateY": -35000,
"unit": "EMU"
}
}
}
]
}Cómo reflejar un elemento
En el siguiente
presentations.batchUpdate
ejemplo de código, se muestra cómo usar el método
UpdatePageElementTransformRequest
para reflejar horizontalmente el elemento de página de forma de flecha de ejemplo
a lo largo de su centro, sin alterar su posición en la página ni su
escala.
Para ello, se usa una transformación de reflexión básica en el marco de referencia del elemento. Para mayor claridad, el
cambio de marco de referencia y la reflexión se muestran con tres llamadas separadas al
UpdatePageElementTransformRequest método,
pero es más eficiente calcular previamente el producto de estas matrices de transformación
y, luego, aplicar ese producto como una sola solicitud.
Para las transformaciones de traducción, el centro de la forma de flecha se mueve hacia el origen y desde él. Los valores de los parámetros se expresan como cálculos para mayor claridad.
El siguiente es el protocolo de solicitud para reflejar un elemento:
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
"requests": [
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": -2000000 - 0.5 * 0.3 * 3000000,
"translateY": -550000 - 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": -1,
"scaleY": 1,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 2000000 + 0.5 * 0.3 * 3000000,
"translateY": 550000 + 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
}
]
}Cómo cambiar el tamaño de un elemento
En el siguiente
presentations.batchUpdate
ejemplo de código, se muestra cómo usar el método
UpdatePageElementTransformRequest
para escalar el elemento de página de forma de flecha de ejemplo para que sea un 50%
más ancho y tenga solo el 80% de su altura actual, mientras se mantiene el centro de la flecha
en la misma posición y se conserva su orientación.
Para ello, se usa una transformación de escala básica en el marco de referencia del elemento. Para mayor claridad, el
cambio de marco de referencia y la escala se muestran con tres llamadas separadas al
UpdatePageElementTransformRequest método,
pero es más eficiente calcular previamente el producto de estas matrices de transformación
y, luego, aplicar ese producto como una sola solicitud.
Para las transformaciones de traducción, el centro de la forma de flecha se mueve hacia el origen y desde él. Los valores de los parámetros se expresan como cálculos para mayor claridad.
El siguiente es el protocolo de solicitud para cambiar el tamaño de un elemento:
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
"requests": [
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": -2000000 - 0.5 * 0.3 * 3000000,
"translateY": -550000 - 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1.5,
"scaleY": 0.8,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 2000000 + 0.5 * 0.3 * 3000000,
"translateY": 550000 + 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
}
]
}Cómo rotar un elemento sobre su centro
En el siguiente
presentations.batchUpdate
ejemplo de código, se muestra cómo usar el método
UpdatePageElementTransformRequest
para rotar el elemento de página de forma de flecha de ejemplo 35
grados en sentido antihorario, mientras se mantiene el centro de la flecha en la misma posición
y se conserva su tamaño.
Para ello, se usa una transformación de rotación básica en el marco de referencia del elemento. Para mayor claridad, el
cambio de marco de referencia y la rotación se muestran con tres llamadas separadas al
UpdatePageElementTransformRequest método,
pero es más eficiente calcular previamente el producto de estas matrices de transformación
y, luego, aplicar ese producto como una sola solicitud.
Para las transformaciones de traducción, el centro de la forma de flecha se mueve hacia el origen y desde él. Los valores de los parámetros se expresan como cálculos para mayor claridad.
El siguiente es el protocolo de solicitud para rotar un elemento sobre su centro:
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
"requests": [
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": -2000000 - 0.5 * 0.3 * 3000000,
"translateY": -550000 - 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": cos(35 * (pi/180)),
"scaleY": cos(35 * (pi/180)),
"shearX": sin(35 * (pi/180)),
"shearY": -sin(35 * (pi/180)),
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 2000000 + 0.5 * 0.3 * 3000000,
"translateY": 550000 + 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
}
]
}