اندازه و تعیین موقعیت عناصر صفحه

دو روش مختلف برای دریافت و تغییر اندازه و موقعیت یک عنصر صفحه وجود دارد:

  1. استفاده از توابع گیرنده و تنظیم کننده آن برای اندازه و موقعیت.
  2. دستکاری تبدیل افین آن، با استفاده از توابع getTransform() و setTransform() و در عین حال حفظ اندازه ذاتی.

خواندن خواص عنصر صفحه

اندازه و چرخش

همانطور که در شکل نشان داده شده است، اندازه و موقعیت با توجه به کادر محدود یک عنصر صفحه رندر شده زمانی که چرخش ندارد اندازه گیری می شود:

  • چپ و بالا : از گوشه سمت چپ بالای صفحه تا گوشه سمت چپ بالای کادر محدود نشده اندازه گیری می شود. برای خواندن مقادیر getLeft() و getTop() استفاده کنید.
  • عرض و ارتفاع : عرض و ارتفاع جعبه مرزی بدون چرخش. برای خواندن مقادیر getWidth() و getHeight() استفاده کنید.
  • چرخش : چرخش در جهت عقربه های ساعت با توجه به خط عمودی در اطراف مرکز جعبه مرزی. برای خواندن مقدار getRotation() استفاده کنید.

تمام طول ها در نقاط (pt) اندازه گیری می شوند. چرخش بر حسب درجه (°) اندازه گیری می شود.

تنظیم ویژگی های عنصر صفحه

شما می توانید اندازه و موقعیت یک عنصر صفحه را هنگام ایجاد آن با استفاده از یک متد insert مانند 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 UI زاویه عمودی آن و همچنین اندازه و موقعیت کادر محدود آن را تغییر می‌دهد، اما چرخش آن را تغییر نمی‌دهد. با استفاده از setRotation() کادر مرزی خط می چرخد ​​که به طور موثر زاویه عمودی آن را تغییر می دهد. بنابراین دو خط می توانند زاویه عمودی بصری یکسانی داشته باشند، اما جعبه های مرزی متفاوت و بنابراین اندازه، موقعیت و مقادیر چرخش متفاوتی داشته باشند.

محدودیت ها

برخی از روش های اندازه و موقعیت یابی با برخی از انواع عناصر صفحه ناسازگار هستند. جدول زیر روش هایی را خلاصه می کند که با انواع خاصی از عناصر صفحه سازگار نیستند.

روش ها شکل ویدئو جدول
getHeight()، getWidth() ✔ ✔ نه (تهی برمی‌گرداند)
setHeight()، setWidth() ✔ ✔ نه
setRotation() ✔ نه نه
scaleHeight()، scaleWidth() ✔ ✔ نه

اگر عنصر صفحه دارای برش باشد، همه روش‌های اندازه‌گیری و موقعیت‌یابی ممکن است نتایج غیرمنتظره‌ای به همراه داشته باشند. همه محدودیت ها در معرض تغییر هستند. برای اطلاعات به روز مرجع را بررسی کنید.

استفاده از تبدیل های آفین

برای کنترل پیشرفته، اندازه و موقعیت یک عنصر صفحه را نیز می توان از طریق اندازه ذاتی (بومی) و تبدیل وابسته محاسبه و تنظیم کرد.

Google Apps Script رابط مشابهی را برای استفاده از تبدیل affine به عنوان Google Slides API فراهم می کند.

  • برای خواندن، این مقاله مفاهیم تبدیل affine و چگونگی استنتاج اندازه رندر شده از اندازه ذاتی (بومی) و تبدیل عناصر صفحه را توضیح می دهد. در Apps Script، استفاده کنید
    • getInherentWidth() و getInherentHeight() برای اندازه اصلی عناصر صفحه.
    • getTransform() برای تبدیل affine عناصر صفحه.
  • برای نوشتن، این مقاله نحوه اندازه و قرار دادن عناصر صفحه را با استفاده از تبدیل affine برای دستیابی به مقیاس‌بندی، چرخش، بازتاب و غیره شرح می‌دهد. در Apps Script، استفاده کنید
    • setTransform() برای تنظیم تبدیل affine عناصر صفحه (مشابه حالت ABSOLUTE)؛
    • preconcatenateTransform() برای الحاق یک تبدیل affine به تبدیل فعلی عناصر صفحه (شبیه به حالت 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°.