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 da 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 da página. Você pode extrair o valor do URL ou usando uma solicitação de leitura da API.
- PAGE_ELEMENT_ID: indica onde você fornece o ID do objeto do elemento da página. Você pode 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 com uma solicitação de leitura da 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 linguagens usando as bibliotecas de cliente da API do Google, consulte Adicionar formas e texto.
Exemplo de forma de seta
Para os exemplos abaixo, suponha que exista um elemento de página de forma de seta de exemplo com os seguintes dados de tamanho e transformação (que podem ser encontrados com uma solicitação de método presentations.pages.get). A forma de exemplo usa as medidas unit EMU (unidade métrica inglesa) 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 a seguir
presentations.batchUpdate
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 por 50 pt alinhado à borda esquerda da forma de seta, mas posicionado 50 pt (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 é a mesma do Y da seta mais 50 pt, já que a distância é medida 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 pt de largura com a mesma linha central horizontal da seta de exemplo, mas posicionado 100 pt (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 de 100 pt. Para aplicar um alinhamento de linha central ao novo círculo, é necessário considerar 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 afetam a largura e a altura renderizadas da seta. Portanto, 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 com 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
a seguir mostra como usar o método
UpdatePageElementTransformRequest
para traduzir o elemento da página exemplo de forma de seta 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 construídas para evitar alterar o tamanho e a 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 a seguir
presentations.batchUpdate
mostra como usar o método
UpdatePageElementTransformRequest
para refletir o elemento da página exemplo de forma de seta
horizontalmente ao longo do centro, sem alterar a posição na página ou
o dimensionamento.
Isso é feito usando uma transformação de reflexão básica no frame de referência do elemento. Para facilitar o entendimento, a mudança e a reflexão do frame de referência são mostradas com três chamadas separadas ao método UpdatePageElementTransformRequest. No entanto, é mais eficiente pré-calcular o produto dessas matrizes de transformação e aplicar esse produto como uma única solicitação.
Para as transformações de tradução, o centro da forma de seta é movido para e da origem. Os valores de parâmetro são expressos como cálculos para maior clareza.
Este é 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 da página exemplo de forma de seta para ter 50%
mais de largura e 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 escalonamento
básico no frame de
referência do elemento. Para maior clareza, a mudança e o escalonamento 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 aplicar esse produto como uma única solicitação.
Para as transformações de tradução, o centro da forma de seta é movido para e da origem. Os valores de parâmetro são expressos como cálculos para maior clareza.
Este é 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 da página exemplo de forma de seta 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 facilitar o entendimento, a mudança e a rotação do frame de referência são mostradas com três chamadas separadas ao método UpdatePageElementTransformRequest. No entanto, é mais eficiente pré-calcular o produto dessas matrizes de transformação e aplicar esse produto como uma única solicitação.
Para as transformações de tradução, o centro da forma de seta é movido para e da origem. Os valores de parâmetro são expressos como cálculos para maior clareza.
Este é o protocolo de solicitação para girar um elemento em torno do centro dele:
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"
}
}
}
]
}