Com a API Google Slides, você pode manipular o local, o tamanho e a orientação de uma
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 (link em inglês). 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 de apresentação.
- PAGE_ID: indica onde você fornece o ID do objeto da página. Recupere o valor disso no URL ou com 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 (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 à linguagem. Para saber como implementar uma atualização em lote em linguagens diferentes 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 de página
em 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 formato de exemplo 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 alinhadas ao
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 pt que é 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 a mesma 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 largo de 40 pt que tem a mesma linha central horizontal que a 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 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
Veja 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 (X,Y) = (2000000, 150000)
EMU (usando uma translação absoluta
applyMode).
A segunda solicitação no lote move a seta de lá. Desta vez, 40.000 EMUs
para a direita e 35.000 EMUs de translação applyModesão usadas para transformar a translaçãoapplyMode de uma translação ou de 35.000 para cima.
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 do 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, em seguida, aplicar esse produto como uma única solicitação.
Para as transformações de translação, o centro da forma de seta é movido para e da 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 da página exemplo de forma de seta para que ele 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 escalonamento
básica no frame de
referência do elemento. Para esclarecer, a
mudança do frame de referência e o escalonamento 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 translação, o centro da forma de seta é movido para e da 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 próprio centro
O exemplo de código
presentations.batchUpdate
a seguir mostra como usar o método
UpdatePageElementTransformRequest
para girar o elemento de página do 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.
Isso é feito usando uma transformação de rotação
básica no frame de
referência do elemento. Para maior clareza, a
mudança do frame de referência e a rotaçã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, em seguida, aplicar esse produto como uma única solicitação
Para as transformações de translação, o centro da forma de seta é movido para e da 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 de seu 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"
}
}
}
]
}