שינוי הגודל והמיקום של רכיבים בדף (original) (raw)

יש שתי דרכים שונות לקבל ולשנות את הגודל והמיקום של רכיב בדף:

באמצעות פונקציות ה-getter וה-setter של הגודל והמיקום.
מניפולציה על טרנספורמציית affine שלו, באמצעות הפונקציות getTransform() ו-setTransform(), תוך שמירה על הגודל המובנה.

קריאת מאפיינים של רכיבי דף

שינוי גודל וסיבוב

כפי שמוצג באיור, הגודל והמיקום נמדדים ביחס לתיבת הגבול של רכיב דף שעבר רינדור, כשאין לו סיבוב:

שמאל ולמעלה: נמדדים מהפינה הימנית העליונה של הדף ועד לפינה הימנית העליונה של תיבת הגבול ללא סיבוב. משתמשים ב-getLeft() וב-getTop() כדי לקרוא את הערכים.
Width ו-Height: הרוחב והגובה של התיבה התוחמת (bounding box) ללא סיבוב. משתמשים ב-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°. שימו לב שהפינה הימנית העליונה של תיבת הגבול קבועה במהלך שינוי התצוגה.

התאמה לעומס (scaling) ב-Slides

השתקפות לאורך הקצה

הארגומנט ב-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°. חשוב לזכור שרכיב הדף מוחזר על אחד מהקצוות של תיבת הגבול שלו, אבל לא במרכז.

Slides Reflection

סיבוב שורה

בדומה לרכיבים אחרים בדף, הסיבוב של קו הוא לא הזווית האנכית של הקו, אלא הסיבוב של תיבת הגבול שלו. כשאתם יוצרים קו עם נקודות התחלה וסיום ספציפיות, זווית הסיבוב שלו תמיד 0°. גרירה של נקודות הקצה של הקו בממשק המשתמש של Google Slides משנה את הזווית האנכית שלו, וגם את הגודל והמיקום של תיבת הגבול שלו, אבל לא את זווית הסיבוב שלו. שימוש ב-setRotation() מסובב את תיבת הגבול של הקו, וכך משנה את הזווית האנכית שלו. לכן לשני קווים יכול להיות אותו זווית חזותית אנכית, אבל תיבות מלבניות שונות שלהם, ולכן ערכים שונים של גודל, מיקום וסיבוב.

מגבלות

חלק משיטות הגודל והמיקום לא תואמות לחלק מסוגי רכיבי הדף. בטבלה הבאה מפורט סיכום של השיטות שלא תואמות לסוגים מסוימים של רכיבי דף.

Methods	צורה	וידאו	טבלה
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°.