ขนาดและตําแหน่งองค์ประกอบของหน้า

คุณสามารถรับและเปลี่ยนขนาดและตำแหน่งขององค์ประกอบหน้าเว็บได้ 2 วิธี ดังนี้

  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°.

คุณสามารถใช้ตัวกำหนดขนาด ตำแหน่ง และการหมุนได้ตามลำดับหรือ การผสมผสานใดก็ได้ การแทนที่บรรทัดที่ 3 ในสคริปต์ก่อนหน้าด้วยสคริปต์ต่อไปนี้ จะให้ผลลัพธ์เดียวกัน

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() สามารถเป็นค่าลบได้เพื่อให้ใช้พลิกองค์ประกอบของหน้าในแนวนอนหรือแนวตั้งได้

// Flip horizontally along the left edge of the bounding box.
shape.scaleWidth(-1);
// Flip vertically along the top edge of the bounding box.
shape.scaleHeight(-1);

รูปต่อไปนี้แสดงวิธีการทำงานของโค้ดก่อนหน้าในรูปร่างที่หมุน 45° โปรดทราบว่าองค์ประกอบหน้าเว็บจะพลิกตามขอบด้านใดด้านหนึ่งของ กรอบล้อมรอบ แต่ไม่ใช่ตรงกลาง

การสะท้อนสไลด์

การหมุนเส้น

การหมุนของเส้นไม่ใช่มุมแนวตั้งของเส้น แต่เป็นการหมุนของกล่องขอบเขต เช่นเดียวกับองค์ประกอบอื่นๆ ของหน้า เมื่อสร้างเส้นที่มีจุดเริ่มต้นและจุดสิ้นสุดที่ระบุ การหมุนของเส้นจะเป็น 0° เสมอ การลากจุดสิ้นสุดของเส้นใน UI ของสไลด์จะเปลี่ยนมุมแนวตั้ง รวมถึงขนาดและตำแหน่งของกล่องขอบเขต แต่จะไม่เปลี่ยนการหมุน การใช้ setRotation() จะหมุนกรอบล้อมรอบของเส้น ซึ่งจะเปลี่ยนมุมแนวตั้งของเส้น ดังนั้น 2 บรรทัดจึงมีมุมแนวตั้งของภาพเท่ากัน แต่มีกรอบล้อมต่างกัน และมีค่าขนาด ตำแหน่ง และการหมุนต่างกัน

ข้อจำกัด

วิธีการปรับขนาดและจัดตำแหน่งบางอย่างใช้ไม่ได้กับองค์ประกอบหน้าเว็บบางประเภท ตารางต่อไปนี้สรุปวิธีการที่ไม่สามารถใช้ร่วมกับองค์ประกอบบางประเภทในหน้าเว็บ

เมธอด รูปร่าง วิดีโอ ตาราง
getHeight(), getWidth() ✔ ✔ NO (แสดงผลเป็นค่าว่าง)
setHeight(), setWidth() ✔ ✔ ไม่
setRotation() ✔ ไม่ ไม่
scaleHeight(), scaleWidth() ✔ ✔ ไม่

วิธีการปรับขนาดและการวางตำแหน่งทั้งหมดอาจให้ผลลัพธ์ที่ไม่คาดคิดหากองค์ประกอบหน้าเว็บมีการเฉือน ข้อจำกัดทั้งหมดอาจมีการเปลี่ยนแปลง ดูข้อมูลล่าสุดได้ที่ข้อมูลอ้างอิง

ใช้การแปลงแบบแอฟฟิน

หากต้องการควบคุมขั้นสูง คุณยังสามารถคำนวณและปรับขนาดและตำแหน่งขององค์ประกอบหน้าเว็บผ่านขนาดโดยธรรมชาติ (เนทีฟ) และการแปลงแบบแอฟฟินได้ด้วย

Google Apps Script มีอินเทอร์เฟซที่คล้ายกับ Google Slides API สำหรับการใช้การแปลงแบบแอฟฟิน

  • หากต้องการอ่านพร็อพเพอร์ตี้ คุณสามารถใช้การแปลงแบบแอฟฟิน ซึ่งอธิบายวิธีปรับขนาด หมุน เฉือน และจัดตำแหน่งองค์ประกอบ ดูวิธีใช้การเปลี่ยนรูปและขนาดโดยธรรมชาติ (เนทีฟ) ขององค์ประกอบเพื่อคำนวณขนาดภาพบนสไลด์ได้ที่การเปลี่ยนรูป ใน Apps Script ให้ใช้สิ่งต่อไปนี้
    • getInherentWidth() และ getInherentHeight() สำหรับขนาดโดยธรรมชาติ (เนทีฟ) ขององค์ประกอบหน้าเว็บ
    • getTransform() สำหรับการแปลงแบบแอฟฟินขององค์ประกอบหน้า
  • หากต้องการเปลี่ยนพร็อพเพอร์ตี้ คุณสามารถใช้การแปลงแบบแอฟฟินเพื่อทำการปรับขนาด การหมุน การสะท้อน และอื่นๆ ดูวิธีปรับขนาดและจัดตำแหน่งองค์ประกอบหน้าเว็บโดยใช้การแปลงแบบแอฟฟินได้ที่การปรับขนาดและการจัดตำแหน่ง ใน Apps Script ให้ใช้รูปแบบต่อไปนี้
    • 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°.