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

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

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

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

แผนภาพของรูปร่างที่แสดงผลผ่านการเปลี่ยนรูปแบบแบบสัมพันธ์กัน

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

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

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

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

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

แอฟฟินแปลงเมทริกซ์

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

$$A=\begin{bmatrix} scale\_x & shear\_x & translate\_x\\ shear\_y & scale\_y & translate\_y\\ 0 & 0 & 1 \end{bmatrix}$$

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

translate_x พารามิเตอร์การแปลจะระบุตำแหน่ง (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\]

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

$$\begin{bmatrix} x'\\ y'\\ 1 \end{bmatrix} =\begin{bmatrix} scale\_x & shear\_x & translate\_x\\ shear\_y & scale\_y & translate\_y\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix}$$

ดังนั้น พิกัดของจุด p' ใหม่จะเป็นดังนี้

$$x' = (scale\_x \times x) + (shear\_x \times y) + translate\_x\\ y' = (scale\_y \times y) + (shear\_y \times x) + translate\_y$$

กำลังคำนวณขอบเขต

ระบุขนาดที่แสดงผลของกรอบล้อมรอบขององค์ประกอบหลังการเปลี่ยนรูปแบบ ที่กรรไกรและปรับขนาด ใช้:

$$width' = (scale\_x \times width) + (shear\_x \times height)\\ height' = (scale\_y \times height) + (shear\_y \times width)$$

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

ข้อจำกัด

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

ช่อง รูปร่าง วิดีโอ ตาราง
คำแปล ✔ ✔ ✔
Scale ✔ ✔ ไม่ได้**
การตัด ✔ ไม่ได้ ไม่ได้

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

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