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

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

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