יש שתי דרכים שונות לקבל ולשנות את הגודל והמיקום של רכיב בדף:
- משתמשים בפונקציות getter ו-setter שלו לציון גודל ומיקום.
- מניפולציה על טרנספורמציית affine שלו, באמצעות הפונקציות
getTransform()ו-setTransform(), תוך שמירה על הגודל המובנה.
מאפייני רכיב של דף קריאה
כפי שמוצג באיור, הגודל והמיקום נמדדים ביחס לתיבת הגבול של רכיב דף שעבר רינדור, כשאין לו סיבוב:
- שמאל ולמעלה: נמדדים מהפינה הימנית העליונה של הדף ועד לפינה הימנית העליונה של תיבת הגבול ללא סיבוב. משתמשים ב-
getLeft()וב-getTop()כדי לקרוא את הערכים. - רוחב וגובה: הרוחב והגובה של התיבה התוחמת שלא מסובבת.
משתמשים ב-
getWidth()וב-getHeight()כדי לקרוא את הערכים. - סיבוב: הסיבוב בכיוון השעון ביחס לקו האנכי סביב מרכז תיבת ה-bounding. משתמשים ב-
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()כדי להגדיר את הסיבוב בכיוון השעון של תיבת הסימון סביב מרכזה.
הסקריפט הבא יוצר צורה בשקופית הראשונה של המצגת הפעילה, משתמש ב-setters כדי לעדכן את המיקום, הגודל והכיוון שלה, וקורא את המידע על המיקום והגודל של הצורה.
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() | ✔ | ✔ | לא (החזרת null) |
| setHeight(), setWidth() | ✔ | ✔ | לא |
| setRotation() | ✔ | לא | לא |
| scaleHeight(), scaleWidth() | ✔ | ✔ | לא |
כל שיטות הגודל והמיקום עשויות להניב תוצאות בלתי צפויות אם לאלמנט הדף יש שינוי כיוון. כל המגבלות כפופות לשינויים. כדאי לעיין במידע עדכני.
שימוש בטרנספורמציות אליפטיות
כדי לשלוט באופן מדויק יותר, אפשר גם לחשב ולשנות את המיקום והגודל של רכיב דף באמצעות הגודל הטבעי (המקורי) שלו וטרנספורמציה אליפטית.
Google Apps Script מספק ממשק דומה לשימוש בטרנספורמציה אפינית כמו Google Slides API.
- במאמר הזה מוסבר על המושגים של טרנספורמציה אפינית ועל האופן שבו אפשר להסיק את הגודל שעבר רינדור מהגודל הטבעי (המקורי) ומהטרנספורמציה של רכיבי הדף. ב-Apps Script, משתמשים ב-
getInherentWidth()ו-getInherentHeight()לגודל המקורי של רכיבי הדף.getTransform()לטרנספורמציה האפינית של רכיבי הדף.
- כדי לכתוב, במאמר הזה מוסבר איך להתאים את הגודל ואת המיקום של רכיבי דף באמצעות טרנספורמציה אפינית כדי להשיג קנה מידה, סיבוב, השתקפות וכו'. ב-Apps Script, משתמשים ב-
setTransform()כדי להגדיר את טרנספורמציית affine של רכיבי הדף (בדומה למצב 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°.