A API Google Slides permite manipular a localização, o tamanho e a orientação de um
PageElement
(caixas de texto, imagens, tabelas e formas básicas) em uma página, mantendo as linhas
retas e preservando pontos e linhas paralelas. Elas são conhecidas como transformações
afins. Os exemplos aqui mostram algumas operações comuns de transformação de elementos de página
usando o método
presentations.batchUpdate.
Estes exemplos usam as seguintes variáveis:
- PRESENTATION_ID: indica onde você fornece o ID da apresentação. Você pode descobrir o valor desse ID no URL da apresentação.
- PAGE_ID: indica onde você fornece o ID do objeto de página. É possível recuperar o valor para isso no URL ou usando uma solicitação de leitura de API.
- PAGE_ELEMENT_ID: indica onde você fornece o ID do objeto do elemento da página. É possível especificar esse ID para elementos criados (com algumas restrições) ou permitir que a API Slides crie um automaticamente. Os IDs de elementos podem ser recuperados por uma solicitação de leitura de API.
Esses exemplos são apresentados como solicitações HTTP para serem neutros em relação ao idioma. Para saber como implementar uma atualização em lote em diferentes idiomas usando as bibliotecas de cliente da API Google, consulte Adicionar formas e texto.
Exemplo de forma de seta
Para estes exemplos abaixo, suponha que exista um elemento de página de forma de seta
com o tamanho e os dados de transformação a seguir (que podem ser encontrados com uma
solicitação de método
presentations.pages.get). A forma de exemplo usa a medição
unit EMU (English Metric Unit) e pt
(ponto).
{
"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"
}
}Alinhar um elemento com outro
O exemplo de código
presentations.batchUpdate
abaixo mostra como usar o método
CreateShapeRequest
para criar novas formas nas posições corretas alinhadas com a
forma de seta de exemplo na página. Em ambos os casos, as coordenadas X e Y
do canto superior esquerdo da nova forma precisam ser calculadas.
A primeira solicitação cria um retângulo de 100 x 50 pontos alinhado à borda esquerda da forma de seta, mas posicionado 50 pontos (50 * 12.700 = 635.000 EMU) abaixo da borda superior da seta. A coordenada X do novo retângulo precisa ser igual à coordenada X da seta para manter a borda esquerda alinhada. A coordenada Y é igual à coordenada Y da seta mais 50 pt, já que a distância é medida a partir da parte de cima da seta. As coordenadas do retângulo são portanto:
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
A segunda solicitação cria um círculo de 40 pontos de largura que tem a mesma linha central horizontal da seta de exemplo, mas é posicionado 100 pontos (1.270.000 EMU) à direita da borda direita da seta. A coordenada X do círculo é a soma da coordenada X da seta, da largura da seta e 100 pt. Para aplicar um alinhamento de linha central ao novo círculo, é necessário levar em conta a altura da seta e do círculo. A coordenada Y do círculo é a coordenada Y da seta mais metade da altura da seta menos metade da altura do círculo. Em ambos os casos, os fatores de escalonamento associados à seta também precisam ser considerados, porque eles afetam a largura e a altura renderizadas da seta. As coordenadas do círculo são:
x = 2000000 + (0.3 * 3000000) + (100 * 12700) = 4170000 EMU y = 550000 + (0.5 * 0.12 * 3000000) - (0.5 * 40 * 12700) = 476000 EMU
Confira a seguir o protocolo de solicitação para alinhar um elemento a outro:
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"
}
}
}
}
]
}Mover um elemento
O exemplo de código
presentations.batchUpdate
abaixo mostra como usar o método
UpdatePageElementTransformRequest
para traduzir o elemento de página example arrow shape de
duas maneiras diferentes.
A primeira solicitação no lote move a seta para a coordenada EMU (X,Y) = (2000000, 150000)
usando uma tradução absoluta
applyMode.
A segunda solicitação no lote move a seta de lá, desta vez 40.000 EMU
para a direita e 35.000 EMU para cima (usando uma tradução relativa applyMode).
As matrizes transformation1 usadas
são criadas para evitar a alteração do tamanho e da orientação do elemento.
Depois de executar as duas solicitações, o canto superior esquerdo da seta fica na coordenada EMU (X,Y) = (2040000, 115000).
Confira a seguir o protocolo de solicitação para mover um 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"
}
}
}
]
}Refletir um elemento
O exemplo de código
presentations.batchUpdate
abaixo mostra como usar o método
UpdatePageElementTransformRequest
para refletir o elemento de página example arrow shape
horizontalmente ao longo do centro, sem alterar a posição na página ou
a escala.
Isso é feito usando uma transformação de
reflexão básica no frame
de referência do elemento. Para maior clareza, o
deslocamento e a reflexão do frame de referência são mostrados com três chamadas separadas para o
método UpdatePageElementTransformRequest,
mas é mais eficiente pré-calcular o produto dessas matrizes de transformação
e, em seguida, aplicar esse produto como uma única solicitação.
Para as transformações de tradução, o centro da forma da seta é movido para a origem e para fora dela. Os valores dos parâmetros são expressos como cálculos para maior clareza.
Confira a seguir o protocolo de solicitação para refletir um 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"
}
}
}
]
}Redimensionar um elemento
O exemplo de código
presentations.batchUpdate
a seguir mostra como usar o método
UpdatePageElementTransformRequest
para dimensionar o elemento de página example arrow shape para ser 50%
mais largo e ter apenas 80% da altura atual, mantendo o centro da seta
na mesma posição e mantendo a orientação.
Isso é feito usando uma transformação de
escala básica no frame
de referência do elemento. Para maior clareza, o
deslocamento e a escala do frame de referência são mostrados com três chamadas separadas para o
método UpdatePageElementTransformRequest,
mas é mais eficiente pré-calcular o produto dessas matrizes
de transformação e, em seguida, aplicar esse produto como uma única solicitação.
Para as transformações de tradução, o centro da forma da seta é movido para a origem e para fora dela. Os valores dos parâmetros são expressos como cálculos para maior clareza.
Confira abaixo o protocolo de solicitação para redimensionar um 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"
}
}
}
]
}Girar um elemento em torno do centro
O exemplo de código
presentations.batchUpdate
a seguir mostra como usar o método
UpdatePageElementTransformRequest
para girar o elemento de página example arrow shape 35
graus no sentido anti-horário, mantendo o centro da seta na mesma posição
e mantendo o tamanho dela.
Isso é feito usando uma transformação de
rotação básica no frame
de referência do elemento. Para maior clareza, o
deslocamento e a rotação do frame de referência são mostrados com três chamadas separadas para o
método UpdatePageElementTransformRequest,
mas é mais eficiente pré-calcular o produto dessas matrizes
de transformação e, em seguida, aplicar esse produto como uma única solicitação.
Para as transformações de tradução, o centro da forma da seta é movido para a origem e para fora dela. Os valores dos parâmetros são expressos como cálculos para maior clareza.
Confira a seguir o protocolo de solicitação para girar um elemento em torno do 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"
}
}
}
]
}