تغيير حجم عناصر الصفحة وتحديد موقعها

هناك طريقتان مختلفتان يمكنك من خلالهما الحصول على حجم عنصر الصفحة وموضعه وتغييره:

  1. استخدام دالتَي getter وsetter للحجم والموضع.
  2. التلاعب بالتحويل الترابطي، باستخدام الدالتين getTransform() وsetTransform() مع الحفاظ على الحجم الأصلي.

قراءة خصائص عناصر الصفحة

تغيير الحجم والتدوير

كما هو موضّح في الشكل، يتم قياس الحجم والموضع وفقًا لمربّع الإحاطة لعنصر الصفحة المعروض عندما لا يكون له دوران:

  • لليسار ولأعلى: يتم قياسهما من الزاوية العلوية اليمنى للصفحة إلى أعلى يمين مربع الحدود الذي لم يتم تدويره. استخدم 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" إلى تغيير الزاوية الرأسية بالإضافة إلى حجم مربّع الإحاطة وموضعه، لكن لا يغير دورانه. يؤدي استخدام setRotation() إلى تدوير مربع إحاطة الخط، ما يؤدي إلى تغيير الزاوية الرأسية بشكل فعّال. لذلك يمكن أن يكون للخطين نفس الزاوية الرأسية المرئية، ولكن مع مربعات الإحاطة المختلفة وبالتالي قيم مختلفة للحجم والموضع والدوران.

القيود

لا تتوافق بعض طرق تغيير الحجم وتحديد الموضع مع بعض أنواع عناصر الصفحة. يلخص الجدول أدناه الطرق غير المتوافقة مع أنواع معينة من عناصر الصفحة.

الطُرق شكل حملة فيديو جدول
getHeight(), getWidth() NO (يعرض قيمة فارغة)
setHeight(), setWidth() لا
setRotation() لا لا
scaleHeight(), scaleWidth() لا

قد ينتج عن جميع طرق تغيير الحجم وتحديد الموضع نتائج غير متوقعة في حالة قص عنصر الصفحة. تخضع جميع القيود للتغيير. تحقق من المرجع للحصول على معلومات محدثة.

استخدام التحويلات الترابطية

للحصول على تحكُّم متقدم، يمكن أيضًا حساب حجم عنصر الصفحة وموضعه وتعديلهما من خلال حجمه (الأصلي) والتحويل الترابطي.

توفّر "برمجة تطبيقات Google" واجهة مماثلة لاستخدام التحويل الترابطي مثل Google Slides API.

  • للقراءة، توضّح هذه المقالة مفاهيم التحويل الترابطي وكيفية استنتاج الحجم المعروض من الحجم (الأصلي) والتحويل لعناصر الصفحة. في "برمجة التطبيقات"، استخدِم
    • getInherentWidth() وgetInherentHeight() للحجم الأصلي لعناصر الصفحة،
    • getTransform() للتحويل الترابطي لعناصر الصفحة.
  • للكتابة، توضّح هذه المقالة كيفية تحديد حجم عناصر الصفحة وتحديد موضعها باستخدام التحويل التقاربي لتحقيق تغيير الحجم والتدوير والانعكاس وما إلى ذلك. في "برمجة التطبيقات"، استخدِم
    • 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°.