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

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

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

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° เสมอ การลาก จุดสิ้นสุดของเส้นใน UI ของ Google สไลด์จะเปลี่ยนมุมแนวตั้งด้วย ขนาดและตำแหน่งของกรอบล้อมรอบ แต่ไม่เปลี่ยนแปลง การหมุน การใช้ setRotation() จะหมุนกรอบล้อมรอบของเส้น ซึ่ง เปลี่ยนมุมแนวตั้งได้อย่างมีประสิทธิภาพ ดังนั้น สองบรรทัดสามารถ มีมุมที่มองเห็นในแนวตั้งเหมือนกัน แต่มีกรอบล้อมรอบต่างกัน ค่าขนาด ตำแหน่ง และการหมุนแตกต่างกัน

ข้อจำกัด

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

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

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

การใช้การแปลงแบบสัมพรรค

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

Google Apps Script มีอินเทอร์เฟซคล้ายๆ กันเพื่อใช้การเปลี่ยนรูปแบบแบบสัมพันธ์กันเป็น Google สไลด์ API

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