คุณดูและเปลี่ยนขนาดและตําแหน่งขององค์ประกอบหน้าเว็บได้ 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);
การปรับสเกล
คุณสามารถใช้ scaleWidth() และ scaleHeight() เพื่อยืดหรือบีบองค์ประกอบหน้าเว็บด้วยปัจจัยการขยายสัมพัทธ์แทนการใช้ setWidth() และ setHeight() ด้านบนเพื่อกำหนดขนาดของรูปร่างเป็นค่าสัมบูรณ์
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() | ✔ | ✔ | ไม่ (แสดงผลเป็นค่าว่าง) |
| 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°.