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.
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. Você pode extrair o valor dessa variável 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). 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 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, 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 pontos alinhado à borda esquerda da forma de seta, mas que é posicionado 50 pontos (50 x 12.700 = 635.000 EMU) abaixo da extremidade superior da seta. A coordenada X do novo retângulo precisa ser a mesma que a coordenada X da seta para que a borda esquerda fique 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. 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 desta posição, desta vez 40.000 EMUs
à direita e 35.000 EMUs acima (usando uma tradução relativa applyMode).
As matrizes de transformação1 usadas
foram projetadas 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 posicionado 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 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 deixar mais claro, a
mudança do quadro de referência e o reflexo 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 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 ser 50%
mais largo e ter apenas 80% da altura atual, mantendo a posição do centro da seta
na mesma posição e mantendo 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 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 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 de rotação
básica no quadro 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"
}
}
}
]
}