יש שתי דרכים שונות לקבל ולשנות את הגודל והמיקום של רכיב בדף:
- משתמשים בפונקציות geter ו-setter שלו לקביעת גודל ומיקום.
- ביצוע מניפולציות על הטרנספורמציה האפינית שלו באמצעות הפונקציות
getTransform()ו-setTransform()תוך שמירה על הגודל המובנה.
קריאת מאפייני רכיב דף
כפי שאפשר לראות באיור, הגודל והמיקום נמדדים ביחס לתיבה התוחמת של רכיב דף שעבר עיבוד, כאשר אין לו סיבוב:
- Left ו-Top: נמדד מהפינה השמאלית העליונה של הדף עד הפינה השמאלית העליונה של התיבה התוחמת שלא סובבה. משתמשים ב-
getLeft()וב-getTop()כדי לקרוא את הערכים. - רוחב וגובה: הרוחב והגובה של התיבה התוחמת שלא סובבה.
אפשר להשתמש ב-
getWidth()וב-getHeight()כדי לקרוא את הערכים. - סיבוב: הסיבוב של כיוון השעון ביחס לקו האנכי מסביב למרכז התיבה התוחמת. אפשר להשתמש ב
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 מספק ממשק דומה לשימוש בטרנספורמציה אפינית כמו ממשק ה-API של Google Slides.
- כדי לקרוא אותם, במאמר הזה מוסברים המושגים של טרנספורמציה אפינית ואיך אפשר להסיק מהם גודל מרונדר מהגודל (המקורי) ומהטרנספורמציה האופיינית לאלמנטים בדף. ב-Apps Script, השתמשו ב:
getInherentWidth()ו-getInherentHeight()לגודל המקורי של רכיבי הדף;getTransform()לטרנספורמציה האפינית של רכיבי הדף.
- במאמר הזה מוסבר איך לשנות את הגודל של רכיבים בדף ולמקם אותם באמצעות טרנספורמציה דומה, כדי לבצע התאמה לעומס (scaling), סיבוב, השתקפות וכו'. ב-Apps Script, השתמשו ב-
setTransform()כדי להגדיר את הטרנספורמציה האפינית של רכיבי דף (בדומה למצב רזולוציה);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°.