באמצעות Google Slides API אפשר לשנות את המיקום, הגודל והכיוון של PageElement (תיבות טקסט, תמונות, טבלאות וצורות בסיסיות) בדף, תוך שמירה על קווים ישרים ועל נקודות וקווים מקבילים. הן נקראות טרנספורמציות אליפטיות. הדוגמאות הבאות מציגות כמה פעולות נפוצות של טרנספורמציה של רכיבי דף באמצעות השיטה presentations.batchUpdate.
בדוגמאות האלה נעשה שימוש במשתנים הבאים:
- PRESENTATION_ID – כאן מזינים את מזהה המצגת. אפשר למצוא את הערך של המזהה הזה מכתובת ה-URL של המצגת.
- PAGE_ID – מציין איפה מציינים את מזהה אובייקט הדף. אפשר לאחזר את הערך הזה מכתובת ה-URL או באמצעות בקשת קריאה ל-API.
- PAGE_ELEMENT_ID – מציין את המיקום שבו מציינים את מזהה האובייקט של רכיב הדף. אפשר לציין את המזהה הזה לאלמנטים שאתם יוצרים (עם מגבלות מסוימות) או לאפשר ל-Slides API ליצור אותו באופן אוטומטי. אפשר לאחזר מזהי רכיבים באמצעות בקשת קריאה ל-API.
הדוגמאות האלה מוצגות כבקשות HTTP כדי שיהיו ניטרליות מבחינת שפה. במאמר הוספת צורות וטקסט מוסבר איך מטמיעים עדכון באצווה בשפות שונות באמצעות ספריות הלקוח של Google API.
דוגמה לצורת חץ
בדוגמאות הבאות נניח שיש רכיב דף לדוגמה בצורת חץ בגודל ובנתוני טרנספורמציה הבאים (אפשר למצוא אותם בבקשה של שיטת presentations.pages.get). בצורת הדוגמה נעשה שימוש ביחידות המידה unit EMU (יחידה מטרית אנגלית) ו-pt (נקודה).
{
"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"
}
}יישור רכיב לרכיב אחר
בדוגמת הקוד הבאה של presentations.batchUpdate מוסבר איך להשתמש ב-method CreateShapeRequest כדי ליצור צורות חדשות במיקומים הנכונים, שתואמות לצורת החץ לדוגמה בדף. בשני המקרים, צריך לחשב את הקואורדינטות X ו-Y של הפינה הימנית העליונה של הצורה החדשה.
הבקשה הראשונה יוצרת מלבן בגודל 100 על 50 נקודות (pt) שמיושר לקצה הימני של צורת החץ, אבל ממוקם 50 נקודות (50 * 12,700 = 635,000 EMU) מתחת לקצה העליון של החץ. קואורדינטת ה-X של המלבן החדש צריכה להיות זהה לקווי ה-X של החץ כדי שהגבול הימני שלו יהיה מיושר. קואורדינטת ה-Y זהה לקווית ה-Y של החץ בתוספת 50 נקודות, כי המרחק נמדד מהחלק העליון של החץ. לכן, הקואורדינטות של המלבן הן:
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
הבקשה השנייה יוצרת עיגול ברוחב 40 פיקסלים עם אותו קו מרכזי אופקי כמו החץ בדוגמה, אבל הוא ממוקם 100 פיקסלים (1,270,000 EMU) מימין לקצה הימני של החץ. קואורדינטת ה-X של העיגול היא הסכום של קואורדינטת ה-X של החץ, רוחב החץ ו-100 נקודות. כדי לאכוף את ההתאמה לקו המרכזי של המעגל החדש, צריך להביא בחשבון את הגובה של החץ וגם של המעגל. הקואורדינטה Y של המעגל היא הקואורדינטה Y של החץ, בתוספת חצי מגובה החץ פחות חצי מגובה המעגל. בשני המקרים, צריך גם להביא בחשבון את גורמי השינוי שמשויכים לחץ, כי הם משפיעים על הרוחב והגובה של החץ ברינדור. לכן הקואורדינטות של המעגל הן:
x = 2000000 + (0.3 * 3000000) + (100 * 12700) = 4170000 EMU y = 550000 + (0.5 * 0.12 * 3000000) - (0.5 * 40 * 12700) = 476000 EMU
זהו פרוטוקול הבקשה ליישור רכיב לרכיב אחר:
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"
}
}
}
}
]
}העברת רכיב
בדוגמת הקוד הבאה של presentations.batchUpdate מוסבר איך להשתמש בשיטה UpdatePageElementTransformRequest כדי לתרגם את רכיב הדף example arrow shape בשתי דרכים שונות.
הבקשה הראשונה בקבוצה מעבירה את החץ לקואורדינטה (X,Y) = (2000000, 150000) EMU (באמצעות תרגום יחסי
applyMode). הבקשה השנייה בקבוצה מעבירה את החץ משם, הפעם 40,000 EMU שמאלה ו-35,000 EMU למעלה (באמצעות תרגום יחסי applyMode). המטריצות של transformation1 שבהן נעשה שימוש נוצרות כדי למנוע שינוי בגודל ובכיוון של הרכיב.
אחרי ביצוע שתי הבקשות, הפינה הימנית העליונה של החץ נמצאת בקואורדינטה (X,Y) = (2040000, 115000) ב-EMU.
זהו פרוטוקול הבקשה להעברת רכיב:
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"
}
}
}
]
}שיקוף רכיב
בדוגמת הקוד הבאה של presentations.batchUpdate מוסבר איך להשתמש בשיטה UpdatePageElementTransformRequest כדי לשקף את רכיב הדף דוגמת צורה של חץ אופקית לאורך מרכזו, בלי לשנות את המיקום שלו בדף או את הגודל שלו.
כדי לעשות זאת, משתמשים בטרנספורמציה בסיסית של השתקפות במסגרת העזר של הרכיב. לצורך הבהרה, ההזזה וההשתקפות של מסגרת העזר מוצגות בשלוש קריאות נפרדות ל-method UpdatePageElementTransformRequest, אבל יעיל יותר לחשב מראש את המכפלה של מטריצות הטרנספורמציה האלה ואז להחיל את המכפלה הזו כבקשה אחת.
בטרנספורמציות translation, מרכז הצורה של החץ מועבר אל המקור וממנו. ערכי הפרמטרים מפורטים כחישובים לצורך הבהרה.
זהו פרוטוקול הבקשה לשיקוף רכיב:
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"
}
}
}
]
}שינוי הגודל של רכיב
בדוגמת הקוד הבאה presentations.batchUpdate מוסבר איך להשתמש בשיטה UpdatePageElementTransformRequest כדי לשנות את הגודל של רכיב הדף דוגמה לצורת חץ כך שיהיה רחב ב-50% ויהיה רק 80% מהגובה הנוכחי שלו, תוך שמירה על מיקום מרכז החץ ועל הכיוון שלו.
כדי לעשות זאת, משתמשים בטרנספורמציה בסיסית של שינוי קנה מידה במסגרת העזר של הרכיב. לצורך הבהרה, ההזזה והשינוי של מסגרת העזר מוצגים בשלוש קריאות נפרדות ל-method UpdatePageElementTransformRequest, אבל יעיל יותר לחשב מראש את המכפלה של מטריצות הטרנספורמציה האלה ואז להחיל את המכפלה הזו כבקשה אחת.
בטרנספורמציות translation, מרכז הצורה של החץ מועבר אל המקור וממנו. ערכי הפרמטרים מפורטים כחישובים לצורך הבהרה.
זהו פרוטוקול הבקשה לשינוי הגודל של אלמנט:
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"
}
}
}
]
}סיבוב אלמנט סביב מרכזו
בדוגמת הקוד הבאה presentations.batchUpdate מוסבר איך להשתמש בשיטה UpdatePageElementTransformRequest כדי לסובב את רכיב הדף צורת החץ לדוגמה ב-35 מעלות נגד כיוון השעון, תוך שמירה על מיקום מרכז החץ ועל הגודל שלו.
כדי לעשות זאת, משתמשים בטרנספורמציה בסיסית של סיבוב במסגרת העזר של הרכיב. לצורך הבהרה, ההזזה והסיבוב של מסגרת העזר מוצגים בשלושה קריאות נפרדות ל-method UpdatePageElementTransformRequest, אבל יעיל יותר לחשב מראש את המכפלה של מטריצות הטרנספורמציה האלה ואז להחיל את המכפלה הזו כבקשה אחת.
בטרנספורמציות translation, מרכז הצורה של החץ מועבר אל המקור וממנו. ערכי הפרמטרים מפורטים כחישובים לשם הבהירות.
זהו פרוטוקול הבקשה לסיבוב רכיב סביב מרכזו:
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"
}
}
}
]
}