Dimensionar e posicionar elementos da página

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

  1. Usando as funções getter e setter para tamanho e posição.
  2. Manipulando a transformação afim com as funções getTransform() e setTransform(), mantendo o tamanho inerente.

Ler propriedades de elementos da página

Dimensionamento e rotação

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

  • Esquerda e Acima: medidos do canto superior esquerdo da página até o canto superior esquerdo da caixa delimitadora não rotacionada. Use getLeft() e getTop() para ler os valores.
  • Largura e Altura: a largura e a altura da caixa delimitadora sem rotação. Use getWidth() e getHeight() para ler os valores.
  • Rotação: a rotação no sentido horário em relação à linha vertical ao redor do 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 (°).

Definir propriedades de elementos da página

Defina o tamanho e a posição de um elemento de página ao criá-lo usando um método de inserção, como insertShape(). Para uma forma já criada, é possível definir o tamanho, a posição e a rotação. Também é possível definir o dimensionamento de um elemento para redimensioná-lo ou refletir ao longo de uma das bordas.

Na criação

Forneça 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 anterior 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

Atualize 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 da caixa delimitadora não rotacionada.
  • Use setWidth() e setHeight() para definir a largura e a altura renderizadas da caixa delimitadora.
  • Use setRotation() para definir a rotação no sentido horário da caixa delimitadora em torno do centro dela.

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 dela 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.');

O registro esperado é:

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. Substituir a terceira linha no script anterior pelo seguinte script produz o mesmo resultado:

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

Dimensionar um elemento de página

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

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

A figura a seguir mostra como o código anterior funciona em um quadrado girado em 45°. O canto superior esquerdo da caixa delimitadora fica fixo durante o escalonamento.

Escalonamento do Google Slides

Refletir um elemento de página

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

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

A figura a seguir mostra como o código anterior funciona em uma forma girada em 45°. O elemento de página é invertido ao longo de uma das bordas da caixa delimitadora, mas não do centro.

Reflexão sobre os slides

Rotação da linha

Assim como outros elementos da página, a rotação de uma linha não é o ângulo vertical dela, mas a rotação da caixa delimitadora. Quando você cria uma linha com pontos inicial e final especificados, a rotação dela é sempre 0°. Arrastar os pontos finais da linha na interface do Apresentações muda o ângulo vertical, bem como o tamanho e a posição da caixa delimitadora, mas não altera a rotação. Usar setRotation() gira a caixa delimitadora da linha, o que muda o ângulo vertical dela. Assim, duas linhas podem ter o mesmo ângulo vertical visual, mas caixas delimitadoras diferentes e, portanto, valores de tamanho, posição e rotação diferentes.

Limitações

Alguns métodos de dimensionamento e posicionamento são incompatíveis com alguns tipos de elementos da página. A tabela a seguir resume os métodos que não são compatíveis com determinados tipos de elementos da 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 podem gerar resultados inesperados se o elemento da página tiver corte. Todas as limitações estão sujeitas a mudanças. Confira a referência para informações atualizadas.

Usar transformações afins

Para um controle avançado, o tamanho e a posição de um elemento da página também podem ser calculados e ajustados usando o tamanho inerente (nativo) e uma transformação afim.

O Google Apps Script oferece uma interface semelhante à API Google Slides para usar transformações afins.

  • Para ler propriedades, use uma transformação afim, que descreve como um elemento é dimensionado, girado, distorcido e posicionado. Para saber como usar a transformação e o tamanho inerente (nativo) de um elemento para calcular o tamanho visual dele em um slide, consulte Transformações. No Apps Script, use:
    • getInherentWidth() e getInherentHeight() para o tamanho inerente (nativo) dos elementos da página;
    • getTransform() para a transformação afim dos elementos da página.
  • Para mudar as propriedades, use transformações afins para realizar escalonamento, rotação, reflexão e muito mais. Para saber como dimensionar e posicionar elementos da página usando transformações afins, consulte Dimensionamento e posicionamento. No Apps Script, use:
    • setTransform() para definir a transformação afim de elementos da página (semelhante ao modo ABSOLUTE);
    • preconcatenateTransform() para pré-concatenar uma transformação afim à transformação atual de elementos da página (semelhante ao modo RELATIVO).

O script a seguir cria uma forma, define a transformação dela, lê o 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 é:

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

A forma resultante tem a seguinte transformação, tamanho renderizado e posição:

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°.