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(), mantendo 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. A substituição da 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 da linha, mas a rotação da caixa delimitadora. Quando você cria 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 muda a rotação. O uso de 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 oferece uma interface semelhante à API Google Slides para usar transformações afins.

  • Para ler propriedades, é possível usar 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, é possível usar 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°.