יש שתי דרכים שונות לקבל ולשנות את הגודל והמיקום של התמונות רכיב דף:
- משתמשים בפונקציות getter ו-setter שלו לציון גודל ומיקום.
- תוך מניפולציה של הטרנספורמציה האקטיבית שלו באמצעות הפונקציות
getTransform()ו-setTransform(), תוך שמירה על הגודל המובנה.
מאפייני רכיב של דף קריאה
כפי שמוצג באיור, הגודל והמיקום נמדדים ביחס תיבה תוחמת של רכיב דף שעבר עיבוד, כאשר אין לו סיבוב:
- שמאל ולמעלה: נמדד מהפינה הימנית העליונה של הדף עד
הפינה השמאלית העליונה של התיבה התוחמת ללא סיבוב. שימוש ב-
getLeft()וב-getTop()כדי לקרוא את הערכים. - רוחב וגובה: הרוחב והגובה של התיבה התוחמת שלא מסובבת.
יש להשתמש ב-
getWidth()וב-getHeight()כדי לקרוא את הערכים. - סיבוב: הסיבוב בכיוון השעון ביחס לקו האנכי שמסביב
במרכז של התיבה התוחמת. צריך להשתמש ב-
getRotation()כדי לקרוא את הערך.
כל האורכים נמדדים בנקודות (pt). הסיבוב נמדד במעלות (°).
הגדרת המאפיינים של רכיב בדף
אפשר להגדיר את הגודל והמיקום של רכיב בדף כשיוצרים אותו באמצעות
שיטת הוספה כמו insertShape(). בשביל צורה קיימת אפשר להגדיר
הגודל, המיקום והסיבוב. אפשר גם להגדיר התאמה לעומס (scaling) של אלמנט
לשנות את הגודל או לשקף אותו לאורך אחד מהקצוות שלו.
בזמן היצירה
אפשר לספק פרטי מיקום וגודל כשיוצרים רכיב בדף.
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()לטרנספורמציה האפינית של רכיבי הדף.
- כדי לכתוב את המודל
article מתאר
איך לשנות את הגודל של רכיבי הדף ולמקם אותם באמצעות טרנספורמציה מעניינת כדי להשיג
התאמה לעומס (scaling), סיבוב, השתקפות וכו'. ב-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°.