Dimensioni e posizionamento degli elementi delle pagine

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

  1. Utilizzando le funzioni getter e setter per le dimensioni e la posizione.
  2. Manipolare la trasformazione affine utilizzando le funzioni getTransform() e setTransform(), mantenendo invariate le dimensioni intrinseche.

Lettura delle proprietà degli elementi della pagina

Dimensioni e rotazione

Come mostrato nella figura, le dimensioni e la posizione vengono misurate rispetto al riquadro delimitante di un elemento della pagina visualizzato quando non è presente alcuna rotazione:

  • Sinistra e Superiore: misurati dall'angolo in alto a sinistra della pagina all'angolo in alto a sinistra della scatola delimitante non ruotata. Utilizza getLeft() e getTop() per leggere i valori.
  • Width e Height: la larghezza e l'altezza della scatola delimitante non ruotata. 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 (°).

Impostazione delle proprietà degli elementi della 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 la scala di un elemento per ridimensionarlo o rifletterlo lungo uno dei suoi bordi.

Al momento della creazione

Puoi fornire informazioni su posizione e dimensioni durante la creazione di un elemento della 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 diapositiva della presentazione attiva con le dimensioni e la posizione specificate e legge le informazioni su queste ultime. 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 della delimitazione non ruotata.
  • Utilizza setWidth() e setHeight() per impostare la larghezza e l'altezza visualizzate della delimitata.
  • Usa setRotation() per impostare la rotazione in senso orario della casella delimitante attorno al suo centro.

Lo script seguente crea una forma nella prima diapositiva della presentazione attiva, utilizza i setter per aggiornarne la posizione, le dimensioni e la rotazione e legge le informazioni sulla posizione e sulle 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 del log previsto da questo script è il seguente:

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

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

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

Scalabilità

Invece di 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 ruotata di 45°. Tieni presente che l'angolo in alto a sinistra della scatola delimitante è fisso durante la scalatura.

Scalabilità di Presentazioni

Riflesso lungo il bordo

L'argomento in scaleWidth() e scaleHeight() può essere negativo in modo da poter essere utilizzato per capovolgere un elemento della pagina in orizzontale o in verticale.

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 su una forma ruotata di 45°. Tieni presente che l'elemento pagina viene capovolto lungo uno dei bordi del suo riquadro delimitante, ma non nel suo centro.

Riflessione sulle slide

Rotazione delle linee

Come per gli altri elementi della pagina, la rotazione di una linea non è l'angolo verticale della linea, ma la rotazione del relativo riquadro delimitante. Quando crei una linea con punti di inizio e di fine specificati, la sua rotazione è sempre di 0°. Trascinando i punti finali della linea nell'interfaccia utente di Presentazioni Google ne modifichi l'angolo verticale, nonché le dimensioni e la posizione della sua area delimitata, ma non la rotazione. L'utilizzo di setRotation() ruota la casella delimitante della linea, che modifica efficacemente il suo angolo verticale. Pertanto, due linee possono avere lo stesso angolo verticale visivo, ma insiemi 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 di seguito riassume i metodi non compatibili con alcuni tipi di elementi di 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 possono dare risultati imprevisti se l'elemento della pagina ha una distorsione. Tutte le limitazioni sono soggette a modifica. Consulta la documentazione di riferimento per informazioni aggiornate.

Utilizzo delle trasformazioni affine

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

Google Apps Script fornisce un'interfaccia simile per utilizzare la trasformazione affine come l'API Google Presentazioni.

  • Per leggere questo articolo, vengono illustrati i concetti di trasformazione affine e come dedurre le dimensioni visualizzate dalle dimensioni intrinsiche (native) e dalla trasformazione per gli elementi della pagina. In Apps Script, utilizza
    • 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 riscalatura, rotazione, riflessione e così via. In Apps Script, utilizza
    • setTransform() per impostare la trasformazione affine degli elementi della pagina (simile alla modalità ABSOLUTE);
    • preconcatenateTransform() per pre-concatenare una trasformazione affine alla trasformazione corrente degli elementi della pagina (simile alla modalità RELATIVA).

Lo script seguente crea una forma, ne imposta la trasformazione, ne legge le dimensioni intrinseche e 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 del log previsto da questo script è il seguente:

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

La forma risultante avrà la seguente trasformazione e le dimensioni e la 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°.