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 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.
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 de 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. É possível especificar esse ID para elementos criados por você (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 termos de linguagem. Para saber como 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 estes exemplos abaixo, suponha que exista um exemplo de elemento de página de forma de seta
com os dados de tamanho e transformação a seguir (que podem ser encontrados com uma
solicitação de 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 estão alinhadas com o
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 x 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 pontos, 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 amplo de 40 pts que tem a mesma linha central horizontal que a seta de exemplo, mas que está posicionado 100 pontos (1.270.000 EMUs) à direita da extremidade direita da seta. A coordenada X do círculo é a soma da coordenada X da seta, do comprimento da seta e 100 pontos. Para aplicar um alinhamento centralizado 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. Nos dois casos, os fatores de dimensionamento 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
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 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 applyModeforam construídas para as
matrizes de alteração1.
Depois de executar as duas solicitações, o canto superior esquerdo da seta fica na coordenada EMU (X,Y) = (2040000, 115000).
Confira abaixo 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 da página example arrow shape
horizontalmente pelo centro, sem alterar a posição na página nem
o tamanho.
Isso é feito usando uma transformação de
reflexo básica no quadro 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 esclarecer, os valores do parâmetro 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 quadro de
referência do elemento. Para deixar mais claro, a
mudança do quadro de referência e o dimensionamento 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 depois aplicar esse produto como uma única solicitação.
Para as transformações de tradução, o centro da forma de seta se move para e da origem. Para esclarecer, os valores do parâmetro são expressos como cálculos.
Confira 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 seu eixo central
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 em 35
graus no sentido anti-horário, mantendo o centro da seta na mesma posição
e mantendo o tamanho.
Isso é feito usando uma transformação básica de
rotação no frame de
referência do elemento. Para deixar mais claro, a
mudança e a rotação do quadro 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 depois aplicar esse produto como uma única solicitação.
Para as transformações de tradução, o centro da forma de seta se move para e da origem. Para esclarecer, os valores do parâmetro são expressos como cálculos.
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"
}
}
}
]
}