คุณดูและเปลี่ยนขนาดและตำแหน่งขององค์ประกอบหน้าเว็บได้ 2 วิธีดังนี้
- ใช้ฟังก์ชัน getter and setter สำหรับขนาดและตำแหน่ง
- การควบคุมการเปลี่ยนรูปแบบแบบ affine โดยใช้ฟังก์ชัน
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 (แสดงผลเป็นค่าว่าง) |
| setHeight(), setWidth() | ✔ | ✔ | ไม่ได้ |
| setRotation() | ✔ | ไม่ได้ | ไม่ได้ |
| scaleHeight(), scaleWidth() | ✔ | ✔ | ไม่ได้ |
วิธีการปรับขนาดและจัดตำแหน่งทั้งหมดอาจให้ผลลัพธ์ที่ไม่คาดคิดหากองค์ประกอบหน้ามีการเฉือน ข้อจำกัดทั้งหมดอาจมีการเปลี่ยนแปลง ตรวจสอบข้อมูลอ้างอิง เพื่อดูข้อมูลล่าสุด
การใช้การเปลี่ยนรูปแบบแบบ affine
สำหรับการควบคุมขั้นสูง ขนาดและตำแหน่งขององค์ประกอบหน้าเว็บยังคำนวณและปรับขนาดผ่านขนาดตามปกติ (เนทีฟ) และการเปลี่ยนรูปแบบแบบ affine ได้ด้วย
Google Apps Script มีอินเทอร์เฟซที่คล้ายกันเพื่อใช้การเปลี่ยนรูปแบบ affine เป็น Google Slides API
- โปรดอ่านบทความนี้ซึ่งจะอธิบายแนวคิดของการเปลี่ยนรูปแบบแบบ affine และวิธีอนุมานขนาดที่แสดงผลจากขนาดตามปกติ (เนทีฟ) และการเปลี่ยนรูปแบบสำหรับองค์ประกอบของหน้าเว็บ ใน Apps Script ให้ใช้
getInherentWidth()และgetInherentHeight()สำหรับขนาดเนทีฟขององค์ประกอบหน้าgetTransform()สำหรับการเปลี่ยนรูปแบบแบบ affine ขององค์ประกอบหน้า
- สำหรับการเขียน บทความนี้จะอธิบายถึงวิธีกำหนดขนาดและจัดตำแหน่งองค์ประกอบของหน้าโดยใช้การเปลี่ยนแบบ affine เพื่อให้เกิดการปรับขนาด การหมุน การสะท้อน ฯลฯ ส่วนใน Apps Script ให้ใช้
setTransform()เพื่อตั้งค่าการเปลี่ยนรูปแบบแบบ affine ขององค์ประกอบหน้า (คล้ายกับโหมด ABSOLUTE)preconcatenateTransform()เพื่อเชื่อมการเปลี่ยนรูปแบบแบบ affine เข้ากับการแปลงปัจจุบันขององค์ประกอบหน้าเว็บ (คล้ายกับโหมด RELATIVE) ล่วงหน้า
สคริปต์ต่อไปนี้จะสร้างรูปร่าง ตั้งค่าการแปลง อ่านขนาดตามปกติ และอ่านการแปลงแบบ affine
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°.