มี 2 วิธีในการรับและเปลี่ยนขนาดและตำแหน่งของ องค์ประกอบของหน้า:
- การใช้ฟังก์ชัน Getter และ Setter สำหรับขนาดและตำแหน่ง
- การจัดการการเปลี่ยนรูปแบบแบบสัมฤทธิ์โดยใช้ฟังก์ชัน
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°.