יש שתי דרכים שונות לקבל ולשנות את הגודל והמיקום של רכיב בדף:
- משתמשים בפונקציות getter ו-setter שלו לציון גודל ומיקום.
- תוך מניפולציה של הטרנספורמציה האקטיבית שלו באמצעות הפונקציות
getTransform()ו-setTransform(), תוך שמירה על הגודל המובנה.
קריאת מאפייני הרכיב של דף
כפי שמוצג באיור, הגודל והמיקום נמדדים ביחס לתיבה התוחמת של רכיב דף שעבר עיבוד, כשאין לו סיבוב:
- Left ו-Top: נמדדים מהפינה השמאלית העליונה של הדף עד לפינה השמאלית העליונה של התיבה התוחמת ללא הסיבוב. כדי לקרוא את הערכים משתמשים ב-
getLeft()וב-getTop(). - רוחב וגובה: הרוחב והגובה של התיבה התוחמת שלא מסובבת.
יש להשתמש ב-
getWidth()וב-getHeight()כדי לקרוא את הערכים. - Rotation: הסיבוב בכיוון השעון ביחס לקו האנכי סביב מרכז התיבה התוחמת. צריך להשתמש ב-
getRotation()כדי לקרוא את הערך.
כל האורכים נמדדים בנקודות (pt). הסיבוב נמדד במעלות (°).
הגדרת המאפיינים של רכיב בדף
אפשר להגדיר את הגודל והמיקום של רכיב בדף כשיוצרים אותו באמצעות שיטת הוספה, כמו insertShape(). לצורה קיימת אפשר להגדיר את הגודל, המיקום והסיבוב. אפשר גם להגדיר את קנה המידה של האלמנט כדי לשנות את הגודל שלו או כך שיוצג לצד אחד הקצוות שלו.
בזמן היצירה
אפשר לספק פרטי מיקום וגודל כשיוצרים רכיב בדף.
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.');
הסקריפט שלמעלה יוצר צורה בשקף הראשון של המצגת הפעילה עם המיקום והגודל שצוינו, וקורא את פרטי המיקום והגודל של הצורה. היומן הצפוי הוא:
Left: 100pt; Top: 200pt; Width: 300pt; Height: 60pt; Rotation: 0 degrees.
גודל, מיקום וסיבוב
ניתן לעדכן את הגודל והמיקום של רכיב בדף לאחר היצירה:
- משתמשים ב-
setLeft()וב-setTop()כדי להגדיר את המיקום של הפינה השמאלית העליונה של התיבה התוחמת שלא מסובבת. - משתמשים ב-
setWidth()וב-setHeight()כדי להגדיר את הרוחב והגובה של התיבה התוחמת. - משתמשים ב-
setRotation()כדי להגדיר סיבוב בכיוון השעון של התיבה התוחמת סביב המרכז שלה.
הסקריפט הבא יוצר צורה בשקף הראשון של המצגת הפעילה, משתמש במגדירים כדי לעדכן את המיקום, הגודל והסיבוב, וקורא את פרטי המיקום והגודל של הצורה.
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.');
פלט היומן הצפוי מהסקריפט הזה מוצג בהמשך:
Left: 100pt; Top: 200pt; Width: 50pt; Height: 60pt; Rotation: 90°.
ניתן להשתמש במגדירי הגודל, המיקום והסיבוב בכל סדר או שילוב. החלפת השורה השלישית שלמעלה בסקריפט הבא תוביל לאותה תוצאה:
shape.setWidth(55);
shape.setRotation(90).setHeight(60).setLeft(100);
shape.setWidth(50).setTop(200);
שינוי קנה מידה
במקום להשתמש ב-setWidth() וב-setHeight() למעלה כדי להגדיר את גודל הצורה לערך מוחלט, אפשר להשתמש ב-scaleWidth() וב-scaleHeight() כדי למתוח או ללחוץ על רכיב בדף עם גורם קנה מידה יחסי.
shape.scaleHeight(0.5).scaleWidth(2);
האיור הבא ממחיש איך הקוד שלמעלה פועל על צורה מרובעת מסובבת ב-45°. שימו לב שהפינה השמאלית העליונה של התיבה התוחמת קבועה במהלך שינוי קנה המידה.
השתקפות לאורך הקצה
הארגומנט ב-scaleWidth() וב-scaleHeight() יכול להיות שלילי, כך שאפשר להשתמש בהם כדי להפוך רכיב בדף לרוחב או לאורך.
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.
האיור הבא ממחיש איך הקוד שלמעלה פועל על צורה שמסובבת ב-45°. שימו לב שרכיב הדף מתחלף לאורך אחד מהקצוות של התיבה התוחמת שלו אבל לא המרכזי שלו.
סיבוב קו
כמו אלמנטים אחרים בדף, סיבוב של קו הוא לא הזווית האנכית של הקו אלא הסיבוב של התיבה התוחמת שלו. כשיוצרים קו עם נקודות ההתחלה והסיום שצוינו, הסיבוב שלו הוא תמיד 0°. גרירה של נקודות הקצה של הקו בממשק המשתמש של Google Slides משנה את הזווית האנכית שלו וגם את הגודל והמיקום של התיבה התוחמת, אבל לא משנה את הסיבוב. השימוש ב-setRotation() מסובב את התיבה התוחמת של הקו, וכך למעשה משנה את הזווית האנכית שלו. כלומר, לשני קווים יכולה להיות אותה זווית אנכית ויזואלית, אבל תיבות תוחמות שונות ולכן ערכי גודל, מיקום וסיבוב שונים.
מגבלות
חלק מהשיטות לשינוי הגודל ולמיקום לא תואמות לסוגים מסוימים של רכיבי דף. הטבלה הבאה מסכמת את השיטות שלא תואמות לסוגים מסוימים של רכיבי דפים.
| שיטות | צורה | וידאו | טבלה |
|---|---|---|---|
| getHeight(), getWidth() | ✔ | ✔ | NO (מחזיר null) |
| setHeight(), setWidth() | ✔ | ✔ | לא |
| setRotation() | ✔ | לא | לא |
| scaleHeight(), scaleWidth() | ✔ | ✔ | לא |
כל השיטות לשינוי הגודל ולמיקום עלולות לספק תוצאות בלתי צפויות אם לרכיב הדף יש חיתוך. כל המגבלות כפופות לשינויים. כדאי לעיין במידע עדכני.
שימוש בהתמרות זיקה
לשליטה מתקדמת, אפשר גם לחשב ולשנות את הגודל והמיקום של רכיב הדף באמצעות הגודל המובנה שלו (המקורי) ובאמצעות הטרנספורמציה האמינה.
Google Apps Script מספק ממשק דומה לשימוש בטרנספורמציה של זיקה כמו Google Slides API.
- במאמר הזה במאמר הזה מוסבר מהם המושגים של טרנספורמציה בתוך טרנספורמציה, ואיך מסיקים את הגודל של רינדור על סמך הגודל המובנה (המקורי) שלו, ואיך לבצע טרנספורמציה ברכיבים בדף. ב-Apps Script, משתמשים ב-
getInherentWidth()ו-getInherentHeight()לגודל המקורי של רכיבי הדף;getTransform()לטרנספורמציה האפינית של רכיבי הדף.
- במאמר הזה מוסבר איך להתאים את הגודל ואת המיקום של רכיבי דף באמצעות טרנספורמציה אפייןית כדי להשיג קנה מידה, סיבוב, השתקפות וכו'. ב-Apps Script, משתמשים ב-
setTransform()כדי להגדיר את הטרנספורמציה האפינית של רכיבי דף (בדומה למצב ABSOLUTE);preconcatenateTransform()כדי לשרשר מראש טרנספורמציה של זיקה לטרנספורמציה הנוכחית של רכיבי דף (בדומה למצב RELATIVE).
הסקריפט הבא יוצר צורה, קובע את הטרנספורמציה שלה, קורא את הגודל הפנימי שלה וקורא את הטרנספורמציה האספנית שלה.
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.');
פלט היומן הצפוי מהסקריפט הזה מוצג בהמשך:
Inherent width: 236.2pt; Inherent height: 236.2pt.
הגודל והמיקום של הצורה שיתקבלו יהיו טרנספורמציה ועיבוד:
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°.