A API Google Slides permite manipular o local, 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 os pontos e linhas paralelas. Isso é conhecido como transformações
afinas. Os exemplos aqui mostram algumas operações comuns de transformação de elementos de página usando o método presentations.batchUpdate.
Esses 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. Recupere o valor dele no URL ou usando uma solicitação de leitura da API.
- PAGE_ELEMENT_ID: indica onde você fornece o ID de objeto do elemento de página. Você pode especificar esse ID para os elementos criados (com algumas restrições) ou permitir que a API Slides crie um automaticamente. Os IDs dos elementos podem ser recuperados por meio de uma solicitação de leitura da API.
Esses exemplos são apresentados como solicitações HTTP para serem neutros em relação à linguagem. Para aprender a implementar uma atualização em lote em diferentes idiomas 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 exemplo de elemento da página
de forma de seta com os seguintes dados de tamanho e transformação, que podem ser encontrados com uma
solicitação do método
presentations.pages.get. O exemplo de forma usa a medida 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 a outro
O exemplo de código
presentations.batchUpdate
a seguir mostra como usar o método
CreateShapeRequest
para criar novas formas nas posições corretas que estejam alinhadas ao
exemplo de forma de seta na página. Em ambos os casos, é preciso calcular as coordenadas X e Y do canto superior esquerdo da nova forma.
A primeira solicitação cria um retângulo de 100 por 50 pontos alinhado à borda esquerda da forma de seta, mas posicionado 50 pontos (50 * 12.700 = 635.000 EMUs) abaixo da borda superior da seta. A coordenada X do novo retângulo precisa ser a mesma da 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 do topo da seta. Portanto, as coordenadas do retângulo são:
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
A segunda solicitação cria um círculo largo de 40 pontos que tem a mesma linha central horizontal que a seta de exemplo, mas que está posicionado 100 pontos (1.270.000 EMUs) à direita da borda direita da seta. A coordenada X do círculo é a soma da coordenada X da seta, da largura dela e 100 pontos. Para aplicar um alinhamento de linha central para o 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. Nos dois 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 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
a seguir mostra como usar o método
UpdatePageElementTransformRequest
para traduzir o elemento de página exemplo de forma de seta de
duas maneiras diferentes.
A primeira solicitação do lote move a seta para a coordenada EMU (X,Y) = (2000000, 150000)
(usando uma tradução absoluta
applyMode).
A segunda solicitação do lote move a seta de lá, desta vez 40.000 EMUs
para a direita e as transformações de conversão usadas
referem-se a uma transformação relativa1, que são as transformações de conversão usadas para cima. applyMode
Depois de executar as duas solicitações, o canto superior esquerdo da seta fica na coordenada EMU (X,Y) = (2040000, 115000).
Veja 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
a seguir mostra como usar o método
UpdatePageElementTransformRequest
para refletir o elemento de 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 maior clareza, a
mudança do frame de referência e a reflexão são mostradas 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 translation, o centro da forma de seta é movido da e para a origem. Para maior clareza, os valores dos parâmetros são expressos como cálculos.
Veja 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 exemplo de forma de seta para que seja 50%
mais largo e tenha apenas 80% da altura atual, mantendo o centro da seta
na mesma posição e a orientação.
Isso é feito usando uma transformação de dimensionamento
básica 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 translation, o centro da forma de seta é movido da e para a origem. Para maior clareza, os valores dos parâmetros são expressos como cálculos.
Veja a seguir 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 seu centro
O exemplo de código
presentations.batchUpdate
a seguir mostra como usar o método
UpdatePageElementTransformRequest
para girar o elemento de página da forma de seta de exemplo 35
graus no sentido anti-horário, mantendo o centro da seta na mesma posição
e o tamanho.
Isso é feito usando uma transformação básica de
rotação no frame de
referência do elemento. Para esclarecer, a
mudança e a rotação do frame de referência são mostradas 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 translation, o centro da forma de seta é movido da e para a origem. Para maior clareza, os valores dos parâmetros são expressos como cálculos.
Veja a seguir 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"
}
}
}
]
}