Dimensionar e posicionar elementos de página

Há duas maneiras diferentes de obter e alterar o tamanho e a posição de um elemento de página:

  1. Usar as funções getter e setter para tamanho e posição.
  2. Manipular a transformação afim, usando as funções getTransform() e setTransform(), preservando o tamanho inerente.

Como ler as propriedades do elemento de página

Dimensionamento e rotação

Conforme mostrado na figura, o tamanho e a posição são medidos em relação ao caixa delimitadora de um elemento de página renderizado quando ele não tem rotação:

  • Esquerda e Superior: medidas do canto superior esquerdo da página até o canto superior esquerdo da caixa delimitadora não girada. Use getLeft() e getTop() para e ler os valores.
  • Largura e Altura: a largura e a altura da caixa delimitadora não girada. Use getWidth() e getHeight() para ler os valores.
  • Rotação: rotação no sentido horário em relação à linha vertical ao redor no centro da caixa delimitadora. Use getRotation() para ler o valor.

Todos os comprimentos são medidos em pontos (pt). A rotação é medida em graus (°).

Como definir as propriedades do elemento de página

Você pode definir o tamanho e a posição de um elemento de página ao criá-lo usando o um método de inserção, como insertShape(). Para uma forma já existente, defina o tamanho, a posição e a rotação; também é possível definir o dimensionamento de um elemento redimensionar ou refleti-lo ao longo de uma de suas bordas.

Na criação

Você pode fornecer informações de posição e tamanho ao criar um elemento de página.

var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 100, 200, 300, 60);
Logger.log('Left: ' + shape.getLeft() + 'pt; Top: '
                    + shape.getTop() + 'pt; Width: '
                    + shape.getWidth() + 'pt; Height: '
                    + shape.getHeight() + 'pt; Rotation: '
                    + shape.getRotation() + ' degrees.');

O script acima cria uma forma no primeiro slide da apresentação ativa com a posição e o tamanho especificados e lê as informações de posição e tamanho da forma. O registro esperado é:

Left: 100pt; Top: 200pt; Width: 300pt; Height: 60pt; Rotation: 0 degrees.

Tamanho, posição e rotação

É possível atualizar o tamanho e a posição de um elemento de página após a criação:

  • Use setLeft() e setTop() para definir a posição do canto superior esquerdo do não rotacionada.
  • Use setWidth() e setHeight() para definir a largura e a altura renderizadas do delimitador. caixa
  • Use setRotation() para definir a rotação no sentido horário da caixa delimitadora em torno do de eventos.

O script a seguir cria uma forma no primeiro slide da apresentação ativa, usa setters para atualizar a posição, o tamanho e a rotação e lê as informações de posição e tamanho da forma.

var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setLeft(100).setTop(200).setWidth(50).setHeight(60).setRotation(90);
Logger.log('Left: ' + shape.getLeft()
                    + 'pt; Top: ' + shape.getTop()
                    + 'pt; Width: ' + shape.getWidth()
                    + 'pt; Height: ' + shape.getHeight()
                    + 'pt; Rotation: ' + shape.getRotation() + '\u00B0.');

A saída de registro esperada desse script é a mostrada abaixo:

Left: 100pt; Top: 200pt; Width: 50pt; Height: 60pt; Rotation: 90°.

Os setters de tamanho, posição e rotação podem ser usados em qualquer ordem ou combinação. A substituição da terceira linha acima pelo script a seguir produzirá o mesmo resultado:

shape.setWidth(55);
shape.setRotation(90).setHeight(60).setLeft(100);
shape.setWidth(50).setTop(200);

Escalonamento

Em vez de usar setWidth() e setHeight() acima para definir o tamanho da forma a um valor absoluto, scaleWidth() e scaleHeight() podem ser usados para esticar ou apertar um elemento de página com um fator de dimensionamento relativo.

shape.scaleHeight(0.5).scaleWidth(2);

A figura abaixo mostra como o código acima funciona em uma forma quadrada girada em 45°. O canto superior esquerdo da caixa delimitadora é fixo durante o redimensionamento.

Dimensionamento dos slides

Reflexo na borda

O argumento em scaleWidth() e scaleHeight() pode ser negativo para que possam ser usada para virar um elemento de página horizontal ou verticalmente.

shape.scaleWidth(-1); // Flip horizontally along the left edge of the bounding box.
shape.scaleHeight(-1); // Flip vertically along the top edge of the bounding box.

A figura abaixo demonstra como o código acima funciona em uma forma girada em 45°. Observe que o elemento de página for invertido ao longo de uma das bordas da caixa delimitadora, mas não ao centro.

Reflexão dos slides

Rotação da linha

Assim como outros elementos da página, a rotação de uma linha não é o ângulo vertical da linha, mas a rotação da caixa delimitadora. Quando você cria uma linha com pontos de início e fim especificados, a rotação será sempre 0°. Arrastando os pontos de extremidade da linha na interface do Apresentações Google também mudam seu ângulo vertical. como o tamanho e a posição da caixa delimitadora, mas não muda a rotação dele. Usar setRotation() gira a caixa delimitadora da linha, o que muda efetivamente seu ângulo vertical. Duas linhas podem têm o mesmo ângulo vertical visual, mas caixas delimitadoras diferentes e, portanto, diferentes valores de tamanho, posição e rotação.

Limitações

Alguns métodos de dimensionamento e posicionamento são incompatíveis com alguns tipos de elementos de página. A tabela abaixo resume os métodos que não são compatíveis com determinados tipos de elementos de página.

Métodos Forma Vídeo Tabela
getHeight(), getWidth() NO (retorna nulo)
setHeight(), setWidth() NÃO
setRotation() NÃO NÃO
scaleHeight(), scaleWidth() NÃO

Todos os métodos de dimensionamento e posicionamento poderão gerar resultados inesperados se a página elemento tem distorção. Todas as limitações estão sujeitas a alterações. Verificar a referência para informações atualizadas.

Como usar transformações afins

Para controle avançado, o tamanho e a posição de um elemento de página também podem ser calculado e ajustado com o tamanho inerente (nativo) e a transformação afim.

O Google Apps Script oferece uma interface semelhante para usar a transformação afim como a API Google Slides.

  • Para ler, article explica os conceitos de transformação afim e como inferir o tamanho renderizado usando (nativo) e transforme os elementos da página. No Apps Script, use
    • getInherentWidth() e getInherentHeight() para o tamanho nativo dos elementos da página;
    • getTransform() para a transformação afim dos elementos da página.
  • Para escrever, este artigo descreve como dimensionar e posicionar elementos de página usando a transformação afim para conseguir dimensionamento, rotação, reflexão etc. No Apps Script, use
    • setTransform() para definir a transformação afins dos elementos de página (semelhante a modo ABSOLUTE);
    • preconcatenateTransform() para pré-concatenar uma transformação afim à transformação atual dos elementos da página (semelhante ao modo RELATIVO).

O script a seguir cria uma forma, define sua transformação, lê seu tamanho inerente, e lê a transformação afim.

var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setTransform(SlidesApp.newAffineTransformBuilder()
                   .setScaleX(2)
                   .setScaleY(1)
                   .setTranslateX(100)
                   .setTranslateY(200)
                   .build());
Logger.log('Inherent width: ' + shape.getInherentWidth()
                              + 'pt; Inherent height: '
                              + shape.getInherentHeight() + 'pt.');

A saída de registro esperada deste script é mostrada abaixo:

Inherent width: 236.2pt; Inherent height: 236.2pt.

A forma resultante terá a seguinte transformação, além do tamanho e da posição renderizados:

AffineTransform{scaleX=2.0, scaleY=1.0, shearX=0.0, shearY=0.0, translateX=100.0, translateY=200.0}
Left: 100pt; Top: 200pt; Width: 472.4pt; Height: 236.2pt; Rotation: 0°.