คู่มือนี้จะอธิบายแนวคิดพื้นฐานที่ใช้ในการเปลี่ยนรูปแบบ (นั่นคือ การย้าย การหมุน การปรับขนาด และการบิดเบือน) องค์ประกอบของหน้า โดยเน้นที่การเปลี่ยนรูปแบบเชิงเชิงเส้นพื้นฐานและการดำเนินการของการเปลี่ยนรูปแบบ
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้การเปลี่ยนรูปแบบเชิงเชิงเส้นเพื่อให้ได้ผลลัพธ์ที่ต้องการได้ที่คู่มือปรับขนาดและตำแหน่งรูปร่าง
ขนาดและตําแหน่งที่มองเห็นได้ขององค์ประกอบหน้าเว็บจะควบคุมโดยพร็อพเพอร์ตี้ 2 อย่าง ได้แก่ size และ transform ขนาดจะอธิบายขนาดที่เหมาะสมหรือขนาดที่สร้างไว้ล่วงหน้าขององค์ประกอบหน้าเว็บที่สร้าง การแปลงจะระบุเมทริกซ์การเปลี่ยนรูปแบบเชิงเชิงเส้น 2 มิติซึ่งระบุวิธีเปลี่ยนรูปแบบของออบเจ็กต์ที่มีขนาดในตัวเพื่อให้ได้ลักษณะที่ปรากฏสุดท้าย
เมื่อคุณเลือกองค์ประกอบหน้าใน UI ของสไลด์และเปลี่ยนขนาดที่มองเห็นได้โดยใช้แถบปรับ คุณกำลังอัปเดตเมทริกซ์การเปลี่ยนรูปแบบนี้ การย้ายองค์ประกอบไปทั่วหน้าเว็บหรือการหมุนองค์ประกอบจะอัปเดตเมทริกซ์การเปลี่ยนรูปแบบขององค์ประกอบด้วย
ใช้ UI ของสไลด์เพื่อเริ่มต้นใช้งาน
คณิตศาสตร์เมทริกซ์ที่คุณใช้เปลี่ยนรูปแบบและปรับขนาดองค์ประกอบหน้าเว็บมีประสิทธิภาพมาก แต่ก็อาจดูน่ากลัวในตอนแรก เนื้อหาส่วนใหญ่ในหน้านี้อธิบายการคำนวณเหล่านี้ อย่างไรก็ตาม คุณสามารถลดความซับซ้อนของข้อกําหนดของการเปลี่ยนรูปแบบและขนาดได้โดยใช้แนวทางต่อไปนี้
- สร้างองค์ประกอบหน้าเว็บโดยใช้ UI ของสไลด์
- ปรับขนาดองค์ประกอบของหน้าเว็บเหล่านี้ตามต้องการโดยยังคงใช้ UI ของสไลด์
- อ่านขนาดและการเปลี่ยนรูปแบบขององค์ประกอบเหล่านั้นโดยใช้เมธอด get
ข้อมูลนี้น่าจะเพียงพอสําหรับการเริ่มต้นใช้งาน ส่วนที่เหลือของคู่มือนี้จะอธิบายการคํานวณการเปลี่ยนรูปแบบที่คุณสามารถใช้เพื่อจัดการองค์ประกอบหน้าเว็บอย่างละเอียด
เมทริกซ์การเปลี่ยนรูปแบบเชิงเชิงเส้น
ไลบรารีกราฟิกมักใช้เมทริกซ์การเปลี่ยนรูปแบบเชิงเชิงเส้น 2 มิติเพื่อควบคุมการปรับขนาด การหมุน การบิดเบือน การสะท้อน และการเปลี่ยนตำแหน่งขององค์ประกอบ ใน Slides API การเปลี่ยนรูปแบบขององค์ประกอบหน้าเว็บจะแสดงเป็นเมทริกซ์ 3x3 ดังนี้
พารามิเตอร์ที่ใช้ในการเปลี่ยนรูปแบบ ได้แก่
translate_x |
พารามิเตอร์ translate จะระบุตำแหน่ง (X,Y) ของมุมซ้ายบนขององค์ประกอบหน้าเว็บ โดยสัมพันธ์กับมุมซ้ายบนของหน้า คุณระบุตำแหน่งแบบสัมพัทธ์ได้โดยใช้หน่วยของจุด (pt) หรือหน่วยเมตริกอังกฤษ (EMU) |
translate_y
| |
scale_x
| พารามิเตอร์ขนาดควบคุมขนาดขององค์ประกอบหน้าเว็บเมื่อแสดงผล เหล่านี้คือตัวคูณที่ไม่มีหน่วย เช่น ค่า scale_x ที่ 1.5 จะขยายความกว้างขององค์ประกอบขึ้น 50%
|
scale_y
| |
shear_x
| พารามิเตอร์การเลื่อนยังไม่มีหน่วยและควบคุมการเอียงขององค์ประกอบหน้าเว็บด้วย คุณใช้พารามิเตอร์การปรับขนาดและการหักงอร่วมกันเพื่อหมุนองค์ประกอบหน้าเว็บได้ |
shear_y |
คุณดูตัวอย่างมากมายบนเว็บที่แสดงวิธีที่เมทริกซ์การเปลี่ยนรูปแบบ 2 มิติส่งผลต่อการแสดงผลวัตถุกราฟิกได้
เมทริกซ์การเปลี่ยนรูปแบบจะสัมพันธ์กับกลุ่มหรือหน้าเว็บขององค์ประกอบ เช่น หากคุณหมุนกลุ่มที่มีสี่เหลี่ยมผืนผ้า ค่าในช่อง transform
ของกลุ่มจะแสดงการหมุน แต่ค่าในช่อง transform
ของสี่เหลี่ยมผืนผ้าจะไม่แสดงการหมุน
การคำนวณขนาดภาพ
หากต้องการกำหนดขนาดที่มองเห็นได้ (แสดงผล) ขององค์ประกอบหน้าเว็บ คุณต้องพิจารณาทั้งพร็อพเพอร์ตี้ขนาดและการเปลี่ยนรูปแบบร่วมกัน คุณไม่สามารถระบุได้ว่าองค์ประกอบหน้าเว็บ 2 รายการใดมีขนาดใหญ่กว่ากันเพียงจากการเปรียบเทียบพร็อพเพอร์ตี้ขนาดขององค์ประกอบ คุณต้องแมปขอบเขตขององค์ประกอบโดยใช้เมทริกซ์การเปลี่ยนรูปแบบและคำนวณขนาดที่แสดงผล
การแมปจุด
หากต้องการแมปจุดที่เฉพาะเจาะจงโดยใช้เมทริกซ์การเปลี่ยนรูปแบบ ให้แปลงจุด (x, y) เป็นเวกเตอร์ [x, y, 1] แล้วทำการคูณเมทริกซ์ ลองดูการแมปจุด p
p′=Ap
ซึ่งจะกลายเป็น
ดังนั้นพิกัดของจุดใหม่ p' คือ
การคำนวณขอบเขต
หากต้องการกำหนดขนาดที่แสดงผลของกล่องขอบเขตขององค์ประกอบหลังจากการเปลี่ยนรูปแบบที่มีการบิดเบือนและปรับขนาด ให้ใช้
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้การเปลี่ยนรูปแบบเชิงเชิงเส้นเพื่อให้ได้ผลลัพธ์ที่ต้องการได้ที่คู่มือปรับขนาดและตำแหน่งรูปร่าง
ข้อจำกัด
ช่องการปรับขนาดและการวางตำแหน่งบางช่องใช้ไม่ได้กับองค์ประกอบหน้าเว็บบางประเภท ตารางด้านล่างแสดงสรุปความเข้ากันได้ขององค์ประกอบหน้าเว็บบางรายการกับฟิลด์การปรับขนาดและการวางตำแหน่ง
ช่อง | รูปร่าง | วิดีโอ | ตาราง |
---|---|---|---|
คำแปล | ✔ | ✔ | ✔ |
Scale | ✔ | ✔ | ไม่** |
การเลื่อน | ✔ | ไม่ | ไม่ |
** หากต้องการอัปเดตมิติข้อมูลแถวและคอลัมน์ของตาราง ให้ใช้ UpdateTableRowPropertiesRequest
และ UpdateTableColumnPropertiesRequest
ช่องการปรับขนาดและตำแหน่งทั้งหมดอาจให้ผลลัพธ์ที่ไม่คาดคิดหากองค์ประกอบหน้าเว็บมีการตัดเฉือน ข้อจำกัดทั้งหมดอาจมีการเปลี่ยนแปลง ดูข้อมูลล่าสุดได้ที่ Google Slides API