การแปลงและองค์ประกอบของหน้า

คู่มือนี้จะอธิบายแนวคิดพื้นฐานที่ใช้ในการเปลี่ยนรูปแบบ (นั่นคือ การย้าย การหมุน การปรับขนาด และการบิดเบือน) องค์ประกอบของหน้า โดยเน้นที่การเปลี่ยนรูปแบบเชิงเชิงเส้นพื้นฐานและการดำเนินการของการเปลี่ยนรูปแบบ

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้การเปลี่ยนรูปแบบเชิงเชิงเส้นเพื่อให้ได้ผลลัพธ์ที่ต้องการได้ที่คู่มือปรับขนาดและตำแหน่งรูปร่าง

ขนาดและตําแหน่งที่มองเห็นได้ขององค์ประกอบหน้าเว็บจะควบคุมโดยพร็อพเพอร์ตี้ 2 อย่าง ได้แก่ size และ transform ขนาดจะอธิบายขนาดที่เหมาะสมหรือขนาดที่สร้างไว้ล่วงหน้าขององค์ประกอบหน้าเว็บที่สร้าง การแปลงจะระบุเมทริกซ์การเปลี่ยนรูปแบบเชิงเชิงเส้น 2 มิติซึ่งระบุวิธีเปลี่ยนรูปแบบของออบเจ็กต์ที่มีขนาดในตัวเพื่อให้ได้ลักษณะที่ปรากฏสุดท้าย

แผนภาพของรูปร่างที่แสดงผลผ่านการแปลงเชิงเชิงเส้น

เมื่อคุณเลือกองค์ประกอบหน้าใน UI ของสไลด์และเปลี่ยนขนาดที่มองเห็นได้โดยใช้แถบปรับ คุณกำลังอัปเดตเมทริกซ์การเปลี่ยนรูปแบบนี้ การย้ายองค์ประกอบไปทั่วหน้าเว็บหรือการหมุนองค์ประกอบจะอัปเดตเมทริกซ์การเปลี่ยนรูปแบบขององค์ประกอบด้วย

ใช้ UI ของสไลด์เพื่อเริ่มต้นใช้งาน

คณิตศาสตร์เมทริกซ์ที่คุณใช้เปลี่ยนรูปแบบและปรับขนาดองค์ประกอบหน้าเว็บมีประสิทธิภาพมาก แต่ก็อาจดูน่ากลัวในตอนแรก เนื้อหาส่วนใหญ่ในหน้านี้อธิบายการคำนวณเหล่านี้ อย่างไรก็ตาม คุณสามารถลดความซับซ้อนของข้อกําหนดของการเปลี่ยนรูปแบบและขนาดได้โดยใช้แนวทางต่อไปนี้

  1. สร้างองค์ประกอบหน้าเว็บโดยใช้ UI ของสไลด์
  2. ปรับขนาดองค์ประกอบของหน้าเว็บเหล่านี้ตามต้องการโดยยังคงใช้ UI ของสไลด์
  3. อ่านขนาดและการเปลี่ยนรูปแบบขององค์ประกอบเหล่านั้นโดยใช้เมธอด get

ข้อมูลนี้น่าจะเพียงพอสําหรับการเริ่มต้นใช้งาน ส่วนที่เหลือของคู่มือนี้จะอธิบายการคํานวณการเปลี่ยนรูปแบบที่คุณสามารถใช้เพื่อจัดการองค์ประกอบหน้าเว็บอย่างละเอียด

เมทริกซ์การเปลี่ยนรูปแบบเชิงเชิงเส้น

ไลบรารีกราฟิกมักใช้เมทริกซ์การเปลี่ยนรูปแบบเชิงเชิงเส้น 2 มิติเพื่อควบคุมการปรับขนาด การหมุน การบิดเบือน การสะท้อน และการเปลี่ยนตำแหน่งขององค์ประกอบ ใน Slides API การเปลี่ยนรูปแบบขององค์ประกอบหน้าเว็บจะแสดงเป็นเมทริกซ์ 3x3 ดังนี้

A=[scale_xshear_xtranslate_xshear_yscale_ytranslate_y001]

พารามิเตอร์ที่ใช้ในการเปลี่ยนรูปแบบ ได้แก่

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

ซึ่งจะกลายเป็น

[xy1]=[scale_xshear_xtranslate_xshear_yscale_ytranslate_y001][xy1]

ดังนั้นพิกัดของจุดใหม่ p' คือ

x=(scale_x×x)+(shear_x×y)+translate_xy=(scale_y×y)+(shear_y×x)+translate_y

การคำนวณขอบเขต

หากต้องการกำหนดขนาดที่แสดงผลของกล่องขอบเขตขององค์ประกอบหลังจากการเปลี่ยนรูปแบบที่มีการบิดเบือนและปรับขนาด ให้ใช้

width=(scale_x×width)+(shear_x×height)height=(scale_y×height)+(shear_y×width)

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้การเปลี่ยนรูปแบบเชิงเชิงเส้นเพื่อให้ได้ผลลัพธ์ที่ต้องการได้ที่คู่มือปรับขนาดและตำแหน่งรูปร่าง

ข้อจำกัด

ช่องการปรับขนาดและการวางตำแหน่งบางช่องใช้ไม่ได้กับองค์ประกอบหน้าเว็บบางประเภท ตารางด้านล่างแสดงสรุปความเข้ากันได้ขององค์ประกอบหน้าเว็บบางรายการกับฟิลด์การปรับขนาดและการวางตำแหน่ง

ช่อง รูปร่าง วิดีโอ ตาราง
คำแปล
Scale ไม่**
การเลื่อน ไม่ ไม่

** หากต้องการอัปเดตมิติข้อมูลแถวและคอลัมน์ของตาราง ให้ใช้ UpdateTableRowPropertiesRequest และ UpdateTableColumnPropertiesRequest

ช่องการปรับขนาดและตำแหน่งทั้งหมดอาจให้ผลลัพธ์ที่ไม่คาดคิดหากองค์ประกอบหน้าเว็บมีการตัดเฉือน ข้อจำกัดทั้งหมดอาจมีการเปลี่ยนแปลง ดูข้อมูลล่าสุดได้ที่ Google Slides API