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, usando as funções getTransform() e setTransform() e preservando o tamanho inerente.

Ler 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 à caixa delimitadora de um elemento de página renderizado quando ele não tem rotação:

  • Esquerda e Acima: medido 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 não rotacionada. 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 do elemento de 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á existente, é possível definir o tamanho, a posição e a rotação. Também é possível definir o escalonamento de um elemento para redimensioná-lo ou refletir 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 ao redor do centro.

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

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 script a seguir produz o mesmo resultado:

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

Escalar 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 uma forma quadrada rotacionada em 45°. O canto superior esquerdo da caixa delimitadora é fixo durante o escalonamento.

Escalonamento de 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 rotacionada 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 de linha

Assim como outros elementos de página, a rotação de uma linha não é o ângulo vertical dela, mas a rotação da caixa delimitadora. Ao criar uma linha com pontos inicial e final especificados, a rotação é sempre de 0°. Arrastar os pontos de extremidade da linha na interface do Slides muda o ângulo vertical, bem como o tamanho e a posição da caixa delimitadora, mas não a rotação. Usar setRotation() rotaciona a caixa delimitadora da linha, o que muda o ângulo vertical. 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 de página. A tabela a seguir 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() NÃO (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 de página tiver cisalhamento. Todas as limitações estão sujeitas a mudanças. Consulte a referência para informações atualizadas.

Usar transformações afins

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

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

  • Para ler propriedades, use uma transformação afim, que descreve como um elemento é escalonado, rotacionado, cisalhado 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 de página;
    • getTransform() para a transformação afim dos elementos de 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 de página usando transformações afins, consulte Dimensionamento e posicionamento. No Apps Script, use:
    • setTransform() para definir a transformação afim de elementos de página (semelhante ao modo ABSOLUTE);
    • preconcatenateTransform() para pré-concatenar uma transformação afim à transformação atual de elementos de página (semelhante ao modo RELATIVE).

O script a seguir cria uma forma, define a transformação, 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°.