L'API Google Slides vous permet de manipuler l'emplacement, la taille et l'orientation d'un
PageElement
(zones de texte, images, tableaux et formes de base) sur une page, tout en conservant les lignes
droites, les points et les lignes parallèles. On parle alors de transformations affines. Les exemples ci-dessous montrent quelques opérations de transformation courantes d'éléments de page à l'aide de la
presentations.batchUpdate
méthode.
Ces exemples utilisent les variables suivantes :
- PRESENTATION_ID : indique où vous fournissez l' ID de la présentation. Vous pouvez découvrir la valeur de cet ID à partir de l'URL de la présentation.
- PAGE_ID : indique où vous fournissez l'ID de l'objet de la page. Vous pouvez récupérer la valeur de cet ID à partir de l'URL ou à l'aide d'une requête de lecture d'API.
- PAGE_ELEMENT_ID : indique où vous fournissez l'ID de l'objet de l'élément de page. Vous pouvez spécifier cet ID pour les éléments que vous créez (avec certaines restrictions) ou autoriser l'API Slides à en créer un automatiquement. Les ID d'élément peuvent être récupérés via une requête de lecture d'API.
Ces exemples sont présentés sous forme de requêtes HTTP pour être indépendants du langage. Pour découvrir comment implémenter une mise à jour groupée dans différents langages à l'aide des bibliothèques clientes des API Google, consultez Ajouter des formes et du texte.
Exemple de forme de flèche
Pour les exemples ci-dessous, supposons qu'il existe un élément de page de forme de flèche avec les données de taille et de transformation suivantes (que vous pouvez trouver avec une requête de méthode
presentations.pages.get
). L'exemple de forme utilise les unités de mesure
unit EMU (English Metric Unit) et pt
(point).
{
"objectId": PAGE_ELEMENT_ID,
"size": {
"width": {
"magnitude": 3000000,
"unit": "EMU"
},
"height": {
"magnitude": 3000000,
"unit": "EMU"
}
},
"transform": {
"scaleX": 0.3,
"scaleY": 0.12,
"shearX": 0,
"shearY": 0,
"translateX": 2000000,
"translateY": 550000,
"unit": "EMU"
},
"shape": {
"shapeType": "RIGHT_ARROW"
}
}Aligner un élément sur un autre
L'exemple de code
presentations.batchUpdate
suivant montre comment utiliser la méthode
CreateShapeRequest
pour créer des formes aux positions correctes, alignées sur l'exemple de forme de flèche
sur la page. Dans les deux cas, les coordonnées X et Y de l'angle supérieur gauche de la nouvelle forme doivent être calculées.
La première requête crée un rectangle de 100 x 50 points aligné sur la bordure gauche de la forme de flèche, mais positionné 50 points (50 * 12 700 = 635 000 EMU) sous le bord supérieur de la flèche. La coordonnée X du nouveau rectangle doit être la même que celle de la flèche pour que sa bordure gauche reste alignée. La coordonnée Y est la même que celle de la flèche plus 50 points, car la distance est mesurée à partir du haut de la flèche. Les coordonnées du rectangle sont donc les suivantes :
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
La deuxième requête crée un cercle de 40 points de large qui a la même ligne centrale horizontale que l'exemple de flèche, mais qui est positionné 100 points (1 270 000 EMU) à droite du bord droit de la flèche. La coordonnée X du cercle est la somme de la coordonnée X de la flèche, de la largeur de la flèche et de 100 points. Pour appliquer un alignement sur la ligne centrale du nouveau cercle, vous devez tenir compte de la hauteur de la flèche et du cercle. La coordonnée Y du cercle est la coordonnée Y de la flèche plus la moitié de la hauteur de la flèche moins la moitié de la hauteur du cercle. Dans les deux cas, les facteurs d'échelle associés à la flèche doivent également être pris en compte, car ils affectent la largeur et la hauteur affichées de la flèche. Les coordonnées du cercle sont donc les suivantes :
x = 2000000 + (0.3 * 3000000) + (100 * 12700) = 4170000 EMU y = 550000 + (0.5 * 0.12 * 3000000) - (0.5 * 40 * 12700) = 476000 EMU
Voici le protocole de requête pour aligner un élément sur un autre :
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
"requests": [
{
"createShape": {
"shapeType": "RECTANGLE",
"elementProperties": {
"pageObjectId": PAGE_ID,
"size": {
"width": {
"magnitude": 100,
"unit": "PT"
},
"height": {
"magnitude": 50,
"unit": "PT"
}
},
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 2000000,
"translateY": 1185000,
"unit": "EMU"
}
}
}
},
{
"createShape": {
"shapeType": "ELLIPSE",
"elementProperties": {
"pageObjectId": PAGE_ID,
"size": {
"width": {
"magnitude": 40,
"unit": "PT"
},
"height": {
"magnitude": 40,
"unit": "PT"
}
},
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 4170000,
"translateY": 476000,
"unit": "EMU"
}
}
}
}
]
}Déplacer un élément
L'exemple de code
presentations.batchUpdate
suivant montre comment utiliser la méthode
UpdatePageElementTransformRequest
pour traduire l'élément de page de forme de flèche de l'exemple de
deux manières différentes.
La première requête du lot déplace la flèche vers la coordonnée (X,Y) = (2000000, 150000)
EMU (à l'aide d'une translation absolue
applyMode).
La deuxième requête du lot déplace la flèche à partir de là, cette fois-ci de 40 000 EMU
vers la droite et de 35 000 EMU vers le haut (à l'aide d'une translation relative applyMode).
Les matrices de transformation1 utilisées
sont conçues pour éviter de modifier la taille et l'orientation de l'élément.
Après l'exécution des deux requêtes, l'angle supérieur gauche de la flèche se trouve à la coordonnée (X,Y) = (2040000, 115000) EMU.
Voici le protocole de requête pour déplacer un élément :
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
"requests": [
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "ABSOLUTE",
"transform": {
"scaleX": 0.3,
"scaleY": 0.12,
"translateX": 2000000,
"translateY": 150000,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 40000,
"translateY": -35000,
"unit": "EMU"
}
}
}
]
}Refléter un élément
L'exemple de code
presentations.batchUpdate
suivant montre comment utiliser la méthode
UpdatePageElementTransformRequest
pour refléter l'élément de page en forme de flèche de l'exemple
horizontalement le long de son centre, sans modifier sa position sur la page ni sa
mise à l'échelle.
Pour ce faire, utilisez une transformation de réflexion de base dans le cadre de référence de l'élément. Pour plus de clarté, le
décalage et la réflexion du cadre de référence sont présentés avec trois appels distincts à la
UpdatePageElementTransformRequest méthode,
mais il est plus efficace de précalculer le produit de ces matrices de transformation
et d'appliquer ensuite ce produit en une seule requête.
Pour les transformations de translation, le centre de la forme de flèche est déplacé vers et depuis l'origine. Les valeurs des paramètres sont exprimées sous forme de calculs pour plus de clarté.
Voici le protocole de requête pour refléter un élément :
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
"requests": [
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": -2000000 - 0.5 * 0.3 * 3000000,
"translateY": -550000 - 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": -1,
"scaleY": 1,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 2000000 + 0.5 * 0.3 * 3000000,
"translateY": 550000 + 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
}
]
}Redimensionner un élément
L'exemple de code
presentations.batchUpdate
suivant montre comment utiliser la méthode
UpdatePageElementTransformRequest
pour mettre à l'échelle l'élément de page de forme de flèche d'exemple afin qu'il soit 50 %
plus large et qu'il n'ait que 80% de sa hauteur actuelle, tout en conservant le centre de la flèche
au même endroit et en maintenant son orientation.
Pour ce faire, utilisez une transformation de mise à l'échelle de base dans le cadre de référence de l'élément. Pour plus de clarté, le
décalage et la mise à l'échelle du cadre de référence sont présentés avec trois appels distincts à la
UpdatePageElementTransformRequest méthode,
mais il est plus efficace de précalculer le produit de ces matrices de transformation
et d'appliquer ensuite ce produit en une seule requête.
Pour les transformations de translation, le centre de la forme de flèche est déplacé vers et depuis l'origine. Les valeurs des paramètres sont exprimées sous forme de calculs pour plus de clarté.
Voici le protocole de requête pour redimensionner un élément :
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
"requests": [
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": -2000000 - 0.5 * 0.3 * 3000000,
"translateY": -550000 - 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1.5,
"scaleY": 0.8,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 2000000 + 0.5 * 0.3 * 3000000,
"translateY": 550000 + 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
}
]
}Faire pivoter un élément autour de son centre
L'exemple de code
presentations.batchUpdate
suivant montre comment utiliser la méthode
UpdatePageElementTransformRequest
pour faire pivoter l'élément de page de forme de flèche d'exemple de 35
degrés dans le sens inverse des aiguilles d'une montre, tout en conservant le centre de la flèche au même endroit
et en maintenant sa taille.
Pour ce faire, utilisez une transformation de rotation de base dans le cadre de référence de l’élément. Pour plus de clarté, le
décalage et la rotation du cadre de référence sont présentés avec trois appels distincts à la
UpdatePageElementTransformRequest méthode,
mais il est plus efficace de précalculer le produit de ces
matrices de transformation, puis d'appliquer ce produit en une seule requête.
Pour les transformations de translation, le centre de la forme de flèche est déplacé vers et depuis l'origine. Les valeurs des paramètres sont exprimées sous forme de calculs pour plus de clarté.
Voici le protocole de requête pour faire pivoter un élément autour de son centre :
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
"requests": [
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": -2000000 - 0.5 * 0.3 * 3000000,
"translateY": -550000 - 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": cos(35 * (pi/180)),
"scaleY": cos(35 * (pi/180)),
"shearX": sin(35 * (pi/180)),
"shearY": -sin(35 * (pi/180)),
"unit": "EMU"
}
}
},
{
"updatePageElementTransform": {
"objectId": PAGE_ELEMENT_ID,
"applyMode": "RELATIVE",
"transform": {
"scaleX": 1,
"scaleY": 1,
"translateX": 2000000 + 0.5 * 0.3 * 3000000,
"translateY": 550000 + 0.5 * 0.12 * 3000000,
"unit": "EMU"
}
}
}
]
}