Dimensioni e posizionamento degli elementi delle pagine

Esistono due modi diversi per recuperare e modificare le dimensioni e la posizione di un elemento di pagina:

  1. Usare le sue funzioni getter e setter per le dimensioni e la posizione.
  2. Manipolare la trasformazione affine mediante le funzioni getTransform() e setTransform() conservando la dimensione intrinseca.

Lettura delle proprietà degli elementi di pagina

Dimensioni e rotazione

Come mostrato nella figura, le dimensioni e la posizione vengono misurate rispetto al riquadro di delimitazione di un elemento di pagina sottoposto a rendering quando non ha rotazione:

  • A sinistra e In alto: misurate dall'angolo in alto a sinistra della pagina all'angolo in alto a sinistra del riquadro di delimitazione non ruotato. Usa getLeft() e getTop() per leggere i valori.
  • Larghezza e Altezza: la larghezza e l'altezza del riquadro di delimitazione non ruotato. Utilizza getWidth() e getHeight() per leggere i valori.
  • Rotazione: la rotazione in senso orario rispetto alla linea verticale attorno al centro del riquadro di delimitazione. Utilizza getRotation() per leggere il valore.

Tutte le lunghezze sono misurate in punti (pt). La rotazione viene misurata in gradi (°).

Impostare le proprietà degli elementi di pagina

Puoi impostare le dimensioni e la posizione di un elemento della pagina quando lo crei utilizzando un metodo di inserimento come insertShape(). Per una forma esistente, puoi impostare le dimensioni, la posizione e la rotazione; puoi anche impostare il ridimensionamento di un elemento in modo da ridimensionarlo o rifletterlo lungo uno dei suoi bordi.

Al momento della creazione

Puoi fornire informazioni su posizione e dimensioni quando crei un elemento di pagina.

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

Lo script riportato sopra crea una forma nella prima slide della presentazione attiva con la posizione e le dimensioni specificate e legge le informazioni su posizione e dimensioni della forma. Il log previsto è:

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

Dimensioni, posizione e rotazione

Puoi aggiornare le dimensioni e la posizione di un elemento della pagina dopo la creazione:

  • Utilizza setLeft() e setTop() per impostare la posizione dell'angolo in alto a sinistra del riquadro di delimitazione non ruotato.
  • Utilizza setWidth() e setHeight() per impostare la larghezza e l'altezza visualizzata del riquadro di delimitazione.
  • Utilizza setRotation() per impostare la rotazione in senso orario del riquadro di delimitazione intorno al centro.

Lo script seguente crea una forma nella prima slide della presentazione attiva, utilizza i setter per aggiornarne posizione, dimensioni e rotazione e legge le informazioni su posizione e dimensioni della 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.');

L'output di log previsto da questo script è il seguente:

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

I setter di dimensioni, posizione e rotazione possono essere utilizzati in qualsiasi ordine o combinazione. La sostituzione della terza riga precedente con lo script seguente produrrà lo stesso risultato:

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

Scalabilità

Anziché utilizzare setWidth() e setHeight() sopra per impostare le dimensioni della forma su un valore assoluto, scaleWidth() e scaleHeight() possono essere utilizzati per allungare o comprimere un elemento della pagina con un fattore di scala relativo.

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

La figura seguente mostra come funziona il codice riportato sopra su una forma quadrata con rotazione di 45°. Tieni presente che l'angolo in alto a sinistra del riquadro di delimitazione è fisso durante il ridimensionamento.

Scalabilità delle slide

Riflesso lungo il bordo

L'argomento in scaleWidth() e scaleHeight() può essere negativo, così da poter utilizzare per capovolgere un elemento di pagina orizzontalmente o 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.

La figura seguente mostra come funziona il codice riportato sopra con una forma ruotata di 45°. Tieni presente che l'elemento di pagina è capovolto lungo uno dei bordi del riquadro di delimitazione, ma non al centro.

Riflesso slide

Rotazione delle linee

Come per altri elementi della pagina, la rotazione di una linea non corrisponde all'angolo verticale della linea, ma alla rotazione del relativo riquadro di delimitazione. Quando crei una linea con punti di inizio e di fine specificati, la sua rotazione è sempre di 0°. Trascinando i punti finali della linea nella UI di Presentazioni Google, vengono modificati l'angolo verticale, le dimensioni e la posizione del riquadro di delimitazione, ma la rotazione non viene modificata. L'utilizzo di setRotation() consente di ruotare il riquadro di delimitazione della linea, che cambia di fatto l'angolo verticale. Pertanto, due linee possono avere lo stesso angolo verticale visivo, ma riquadri di delimitazione diversi e, di conseguenza, dimensioni, posizione e valori di rotazione diversi.

Limitazioni

Alcuni metodi di dimensionamento e posizionamento non sono compatibili con alcuni tipi di elementi della pagina. La tabella riportata di seguito riassume i metodi non compatibili con alcuni tipi di elementi della pagina.

Metodi Shape Video Tabella
getHeight(), getWidth() NO (restituisce null)
setHeight(), setWidth() NO
setRotation() NO NO
scaleHeight(), scaleWidth() NO

Tutti i metodi di dimensionamento e posizionamento potrebbero restituire risultati imprevisti se l'elemento della pagina presenta un taglio. Tutte le limitazioni sono soggette a modifica. Consulta il riferimento per informazioni aggiornate.

Utilizzo delle trasformazioni affine

Per il controllo avanzato, le dimensioni e la posizione di un elemento della pagina possono essere calcolate e regolate anche tramite le dimensioni intrinseche (native) e la trasformazione affine.

Google Apps Script offre un'interfaccia simile per utilizzare la trasformazione affine dell'API Presentazioni Google.

  • Per leggere il testo, questo articolo spiega i concetti della trasformazione affine e come dedurre le dimensioni di cui è stato eseguito il rendering dalla dimensione intrinseca (nativa) e la trasformazione per gli elementi della pagina. In Apps Script, usa
    • getInherentWidth() e getInherentHeight() per le dimensioni native degli elementi della pagina;
    • getTransform() per la trasformazione affine degli elementi della pagina.
  • Per scrivere, questo articolo descrive come ridimensionare e posizionare gli elementi della pagina utilizzando la trasformazione affine per ottenere scalabilità, rotazione, riflessione e così via. In Apps Script, usa
    • setTransform() per impostare la trasformazione affine degli elementi della pagina (simile alla modalità ASSOLUTO);
    • preconcatenateTransform() per pre-concatenare una trasformazione affine alla trasformazione attuale degli elementi della pagina (simile alla modalità RELATIVA).

Lo script seguente crea una forma, imposta la trasformazione, legge la dimensione intrinseca e legge la trasformazione affine.

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

L'output di log previsto da questo script è il seguente:

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

La forma risultante avrà le seguenti trasformazioni, dimensioni e posizione visualizzate:

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