คุณดูและเปลี่ยนขนาดและตําแหน่งขององค์ประกอบหน้าเว็บได้ 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°.