คุณดูและเปลี่ยนขนาดและตำแหน่งขององค์ประกอบหน้าเว็บได้ 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() จะหมุนกรอบขอบเขตของเส้น ซึ่งเปลี่ยนมุมในแนวตั้งได้อย่างมีประสิทธิภาพ ดังนั้นเส้น 2 เส้นอาจมีมุมที่มองเห็นในแนวตั้งเดียวกันได้ แต่มีกรอบล้อมรอบต่างกัน จึงทำให้ขนาด ตำแหน่ง และค่าการหมุนต่างกัน
ข้อจำกัด
วิธีการปรับขนาดและการวางตำแหน่งบางวิธีอาจใช้ไม่ได้กับองค์ประกอบของหน้าบางประเภท ตารางด้านล่างจะสรุปวิธีการที่ใช้ไม่ได้กับองค์ประกอบหน้าเว็บบางประเภท
| วิธีการ | รูปร่าง | วิดีโอ | ตาราง |
|---|---|---|---|
| getHeight(), getWidth() | ✔ | ✔ | NO (แสดงผลค่า Null) |
| setHeight(), setWidth() | ✔ | ✔ | ไม่ควร |
| setRotation() | ✔ | ไม่ควร | ไม่ควร |
| scaleHeight(), scaleWidth() | ✔ | ✔ | ไม่ควร |
วิธีการปรับขนาดและการวางตำแหน่งอาจให้ผลลัพธ์ที่ไม่คาดคิดหากองค์ประกอบของหน้าตัด ข้อจำกัดทั้งหมดอาจมีการเปลี่ยนแปลง โปรดดูข้อมูลอ้างอิงล่าสุด
การใช้การแปลงแบบสัมพรรค
สำหรับการควบคุมขั้นสูง ขนาดและตำแหน่งขององค์ประกอบหน้าเว็บยังสามารถคำนวณและปรับเปลี่ยนได้ผ่านขนาดแฝง (เนทีฟ) และการเปลี่ยนรูปแบบผู้สนใจ
Google Apps Script มีอินเทอร์เฟซคล้ายๆ กันเพื่อใช้การเปลี่ยนรูปแบบแบบสัมพันธ์กันเป็น Google สไลด์ API
- โปรดอ่านบทความนี้อธิบายแนวคิดของการเปลี่ยนรูปแบบแบบสัมพันธ์กันและวิธีอนุมานขนาดที่แสดงผลจากขนาดแฝง (เนทีฟ) และการเปลี่ยนรูปแบบสำหรับองค์ประกอบของหน้าเว็บ ใน 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°.