Opérations de transformation

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 gardant les lignes droites et en conservant les points et les lignes parallèles. Celles-ci sont appelées transformations affines. Les exemples ci-dessous illustrent certaines opérations de transformation d'éléments de page courants à l'aide de la méthode presentations.batchUpdate.

Ces exemples utilisent les variables suivantes :

  • PRESENTATION_ID : indique où vous fournissez l'ID de la présentation. Vous trouverez la valeur de cet ID dans l'URL de la présentation.
  • PAGE_ID : indique où vous fournissez l'ID de l'objet de page. Vous pouvez récupérer cette valeur à partir de l'URL ou à l'aide d'une requête de lecture d'API.
  • PAGE_ELEMENT_ID : indique l'emplacement 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éments 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 neutres en termes de langage. Pour savoir comment implémenter une mise à jour par lot dans différentes langues à 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 en forme de flèche avec les données de taille et de transformation suivantes (qui peuvent être trouvées 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, alignées sur la forme de flèche de l'exemple sur la page. Dans les deux cas, les coordonnées X et Y du coin 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 la 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 la flèche de l'exemple, mais qui est positionné à 100 points (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 forcer l'alignement sur la ligne centrale du nouveau cercle, il faut tenir compte de la hauteur de la flèche et du cercle. La coordonnée Y du cercle est égale à 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 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 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'élément de page exemple de forme de flèche de deux manières différentes.

La première requête du lot déplace la flèche vers les coordonnées EMU (X,Y) = (2000000, 150000) (à l'aide d'une translation absolue applyMode). La deuxième requête du lot déplace la flèche à partir de là, cette fois de 40 000 EMU vers la droite et de 35 000 EMU vers le haut (à l'aide d'une translation relative applyMode). Les matrices transformation1 utilisées sont construites 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 EMU (X,Y) = (2040000, 115000).

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 exemple de 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 repère sont illustré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 une seule requête.

Pour les transformations de 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 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 exemple de forme de flèche afin qu'il soit 50 % plus large et ne conserve que 80 % de sa hauteur actuelle, tout en gardant le centre de la flèche à 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 cadre de référence sont affichés avec 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 une seule requête.

Pour les transformations de 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 de forme de flèche de 35 degrés dans le sens inverse des aiguilles d'une montre, tout en conservant le centre de la flèche à la même position et en gardant 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é, la translation et la rotation du repère sont affichées avec 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 une seule requête.

Pour les transformations de 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"         }       }     }   ] }