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

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

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

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

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

• اليسار والجزء العلوي: يتم قياسهما من أعلى يسار الصفحة إلى أعلى يمين مربع الإحاطة غير المدار. استخدِم getLeft() وgetTop() لقراءة القيم.
• العرض والارتفاع: عرض وارتفاع صندوق الإحاطة الذي لا يتم تدويره. يمكنك استخدام getWidth() وgetHeight() لقراءة القيم.
• التدوير: التدوير في اتجاه عقارب الساعة بالنسبة إلى الخط الرأسي حول وسط مربع الإحاطة. استخدِم getRotation() لقراءة القيمة.

تُقاس جميع الأطوال بالنقاط (نقطة). ويتم قياس الدوران بالدرجات (°).

إعداد خصائص عناصر الصفحة

يمكنك ضبط حجم عنصر الصفحة وموضعه عند إنشائه باستخدام طريقة إدراج مثل 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()	✔	✔	لا (عرض فارغ)
setHeight(), setWidth()	✔	✔	لا
setRotation()	✔	لا	لا
scaleHeight(), scaleWidth()	✔	✔	لا

قد تعطي جميع طرق تحديد الحجم وتحديد الموضع نتائج غير متوقعة إذا كان عنصر الصفحة به قص. جميع القيود عرضة للتغيير. راجع المرجع للحصول على معلومات محدثة.

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

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

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

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