Tailles et positionnement des éléments de la page

Il existe deux manières d'obtenir et de modifier la taille et la position d'un élément de page:

  1. Utiliser ses fonctions getter et setter pour la taille et la position.
  2. Manipulation de sa transformation affine à l'aide de ses fonctions getTransform() et setTransform() tout en conservant la taille inhérente.

Lire les propriétés des éléments de page

Dimensionnement et rotation

Comme le montre la figure, la taille et la position sont mesurées par rapport au cadre de délimitation d'un élément de page affiché en l'absence de rotation:

  • Gauche et Haut: mesures entre l'angle supérieur gauche de la page et l'angle supérieur gauche du cadre de délimitation sans rotation. Utilisez getLeft() et getTop() pour lire les valeurs.
  • Largeur et Hauteur: largeur et hauteur du cadre de délimitation sans rotation. Utilisez getWidth() et getHeight() pour lire les valeurs.
  • Rotation: rotation dans le sens des aiguilles d'une montre par rapport à la ligne verticale autour du centre du cadre de délimitation. Utilisez getRotation() pour lire la valeur.

Toutes les longueurs sont exprimées en points (pt). La rotation se mesure en degrés (°).

Définir les propriétés des éléments de page

Vous pouvez définir la taille et la position d'un élément de page lorsque vous le créez à l'aide d'une méthode d'insertion telle que insertShape(). Pour une forme existante, vous pouvez définir la taille, la position et la rotation. Vous pouvez également définir la mise à l'échelle d'un élément pour le redimensionner ou le refléter le long de l'un de ses bords.

À la création

Vous pouvez fournir des informations sur la position et la taille lorsque vous créez un élément de page.

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

Le script ci-dessus crée une forme sur la première diapositive de la présentation active avec la position et la taille spécifiées, et lit les informations de position et de taille de la forme. Voici le journal attendu:

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

Taille, position et rotation

Vous pouvez modifier la taille et la position d'un élément de page après sa création:

  • Utilisez setLeft() et setTop() pour définir la position de l'angle supérieur gauche du cadre de délimitation sans rotation.
  • Utilisez setWidth() et setHeight() pour définir la largeur et la hauteur du rendu du cadre de délimitation.
  • Utilisez setRotation() pour définir la rotation du cadre de délimitation autour de son centre dans le sens des aiguilles d'une montre.

Le script suivant crée une forme sur la première diapositive de la présentation active, utilise des setters pour mettre à jour sa position, sa taille et sa rotation, et lit les informations de position et de taille de la forme.

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

La sortie de journal attendue de ce script est la suivante:

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

Les setters de taille, de position et de rotation peuvent être utilisés dans n'importe quel ordre ou combinaison. Si vous remplacez la troisième ligne ci-dessus par le script suivant, vous obtiendrez le même résultat:

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

Mise à l'échelle

Au lieu d'utiliser setWidth() et setHeight() ci-dessus pour définir la taille de la forme sur une valeur absolue, vous pouvez utiliser scaleWidth() et scaleHeight() pour étirer ou presser un élément de page avec un facteur de mise à l'échelle relatif.

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

La figure ci-dessous illustre le fonctionnement du code ci-dessus sur une forme carrée ayant fait l'objet d'une rotation à 45°. Notez que l'angle supérieur gauche du cadre de délimitation est fixe pendant la mise à l'échelle.

Mise à l'échelle Slides

Reflet le long du bord

L'argument dans scaleWidth() et scaleHeight() peut être négatif afin de pouvoir inverser un élément de page horizontalement ou verticalement.

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 figure ci-dessous illustre le fonctionnement du code ci-dessus sur une forme pivotée à 45°. Notez que l'élément de page est retourné le long de l'un des bords de son cadre de délimitation, mais pas au centre.

Slides – Réflexion

Rotation des lignes

Comme les autres éléments de la page, la rotation d'une ligne ne correspond pas à l'angle vertical de la ligne, mais à la rotation de son cadre de délimitation. Lorsque vous créez une ligne avec des points de début et de fin spécifiés, sa rotation est toujours de 0°. Si vous faites glisser les extrémités de la ligne dans l'interface utilisateur de Google Slides, son angle vertical ainsi que la taille et la position de son cadre de délimitation ne sont pas modifiés. L'utilisation de setRotation() permet de faire pivoter le cadre de délimitation de la ligne, ce qui modifie l'angle vertical. Deux lignes peuvent donc avoir le même angle vertical visuel, mais des cadres de délimitation et donc des valeurs de taille, de position et de rotation différentes.

Limites

Certaines méthodes de dimensionnement et de positionnement sont incompatibles avec certains types d'éléments de page. Le tableau ci-dessous récapitule les méthodes non compatibles avec certains types d'éléments de page.

Méthodes Forme Vidéo Table
getHeight(), getWidth() NO (renvoie une valeur nulle)
setHeight(), setWidth() NON
setRotation() NON NON
scaleHeight(), scaleWidth() NON

Toutes les méthodes de dimensionnement et de positionnement peuvent donner des résultats inattendus si l'élément de la page est cisaillé. Toutes les limitations sont susceptibles d'être modifiées. Consultez la référence pour obtenir des informations à jour.

Utiliser des transformations affines

Pour un contrôle avancé, la taille et la position d'un élément de page peuvent également être calculées et ajustées grâce à sa taille (native) inhérente et à sa transformation affine.

Google Apps Script fournit une interface semblable à celle de l'API Google Slides pour utiliser la transformation affine.

  • Pour être lu, cet article explique les concepts de transformation affine et comment déduire la taille de rendu à partir de la taille et de la transformation inhérentes (natives) des éléments de page. Dans Apps Script, utilisez
    • getInherentWidth() et getInherentHeight() pour la taille native des éléments de page ;
    • getTransform() pour la transformation affine des éléments de la page
  • Cet article explique comment dimensionner et positionner les éléments de page à l'aide d'une transformation affine pour obtenir une mise à l'échelle, une rotation, une réflexion, etc. Dans Apps Script, utilisez
    • setTransform() pour définir la transformation affine des éléments de page (semblable au mode ABSOLUTE) ;
    • preconcatenateTransform() pour préconcaténer une transformation affine à la transformation actuelle des éléments de page (semblable au mode RELATIVE).

Le script suivant crée une forme, définit sa transformation, lit sa taille inhérente et lit sa transformation 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.');

La sortie de journal attendue de ce script est la suivante:

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

La forme obtenue se présentera comme suit:

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