L'API Google Slides vous permet de manipuler l'emplacement, la taille et l'orientation d'un élément PageElement (zones de texte, images, tableaux et formes de base) sur une page, tout en gardant les lignes droites et en préservant les points et les lignes parallèles. Celles-ci sont appelées transformations affines. Les exemples présentés ici illustrent quelques opérations de transformation d'élément de page courantes utilisant la méthode presentations.batchUpdate.
Ces exemples utilisent les variables suivantes:
- PRESENTATION_ID : indique où vous fournissez l'ID de 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 d'objet Page. Vous pouvez récupérer la valeur de cet élément à partir de l'URL ou à l'aide d'une requête de lecture d'API.
- PAGE_ELEMENT_ID : indique où vous fournissez l'ID d'objet d'é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éments peuvent être récupérés via une requête de lecture de l'API.
Ces exemples sont présentés comme des requêtes HTTP afin de ne pas tenir compte du langage. Pour découvrir comment implémenter une mise à jour par lot 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 exemple d'élément de page en 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 mesures 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 avec un autre
L'exemple de code presentations.batchUpdate suivant montre comment utiliser la méthode CreateShapeRequest pour créer des formes aux positions correctes qui correspondent à 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 flèche, mais placé 50 pt (50 * 12 700 = 635 000 EMU) sous le bord supérieur de la flèche. La coordonnée X du nouveau rectangle doit être identique à celle de la flèche pour que sa bordure gauche reste alignée. La coordonnée Y est identique à la coordonnée Y de la flèche plus 50 pt, car la distance est mesurée à partir du haut de la flèche. Les coordonnées du rectangle sont donc:
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
La deuxième demande crée un cercle de 40 points avec la même ligne centrale horizontale que l'exemple de flèche, mais qui est positionné à 100 pt (1 270 000 EMU) à droite du bord droit de la flèche. La coordonnée X du cercle correspond à la somme de la coordonnée X de la flèche, de la largeur de la flèche et de 100 points. Pour aligner le nouveau cercle sur la ligne centrale, vous devez prendre en compte la hauteur de la flèche et du cercle. La coordonnée Y du cercle correspond à 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 de mise à l'é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:
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 permettant d'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'exemple d'élément de page en forme de flèche de deux manières différentes.
La première requête du lot déplace la flèche vers la coordonnée EMU (X,Y) = (2000000, 150000) (à l'aide d'une traduction absolue
applyMode).
La deuxième requête du lot déplace la flèche vers la droite, cette fois 40 000 EMU vers la droite et 35 000 EMU modifient l'orientation des matrices vers le haut (à l'aide d'une matrice de transformation basée sur l'applyMode).
Une fois les deux requêtes exécutées, l'angle supérieur gauche de la flèche se trouve aux coordonnées (X,Y)= (2040000, 115000) de l'EMU.
Voici le protocole de requête permettant de 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ète un élément
L'exemple de code presentations.batchUpdate suivant montre comment utiliser la méthode UpdatePageElementTransformRequest pour refléter l'exemple d'élément de page en forme de flèche 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 représentés par trois appels distincts à la méthode UpdatePageElementTransformRequest. Toutefois, il est plus efficace de précalculer le produit de ces matrices de transformation, puis d'appliquer ce produit en tant que requête unique.
Pour les transformations translation, le centre de la forme de la flèche est déplacé vers et depuis l'origine. Pour plus de clarté, les valeurs des paramètres sont exprimées sous forme de calculs.
Voici le protocole de requête permettant de 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'exemple d'élément de page en forme de flèche afin qu'il soit 50 % plus large et ne présente que 80% de sa hauteur actuelle, tout en gardant le centre de la flèche dans la même position et en conservant 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 frame de référence sont représentés par trois appels distincts à la méthode UpdatePageElementTransformRequest. Toutefois, il est plus efficace de précalculer le produit de ces matrices de transformation, puis d'appliquer ce produit en tant que requête unique.
Pour les transformations translation, le centre de la forme de la flèche est déplacé vers et depuis l'origine. Pour plus de clarté, les valeurs des paramètres sont exprimées sous forme de calculs.
Voici le protocole de requête permettant de 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'exemple d'élément de page en forme de flèche de 35 degrés dans le sens inverse des aiguilles d'une montre, tout en gardant le centre de la flèche dans la même position et en conservant 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 changement et la rotation du frame de référence sont représentés par trois appels distincts à la méthode UpdatePageElementTransformRequest. Toutefois, il est plus efficace de précalculer le produit de ces matrices de transformation, puis d'appliquer ce produit en tant que requête unique.
Pour les transformations translation, le centre de la forme de la flèche est déplacé vers et depuis l'origine. Pour plus de clarté, les valeurs des paramètres sont exprimées sous forme de calculs.
Voici le protocole de requête permettant de 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"
}
}
}
]
}