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

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

เปลี่ยนรูปแบบองค์ประกอบ

Slides API ช่วยให้คุณจัดตำแหน่งและปรับขนาดองค์ประกอบในหน้าเว็บได้ โดยก่อนอื่นให้พิจารณาว่าต้องใช้การเปลี่ยนรูปแบบประเภทใด จากนั้นจึงใช้การเปลี่ยนรูปแบบนั้นโดยใช้เมธอด presentations.batchUpdate() ที่มีองค์ประกอบ UpdatePageElementTransformRequest อย่างน้อย 1 รายการ

คุณสามารถเปลี่ยนรูปแบบได้โดยใช้ ApplyMode ดังนี้

• ABSOLUTE transforms replace the element's existing transformation matrix. ระบบจะตั้งค่าพารามิเตอร์ที่คุณละเว้นจากคําขออัปเดตการเปลี่ยนรูปแบบเป็น 0

• RELATIVE ทรานสฟอร์มจะคูณกับเมทริกซ์การเปลี่ยนรูปแบบที่มีอยู่ขององค์ประกอบ (ลําดับการคูณมีผล) ดังนี้

$$A' = BA$$

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

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

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

สําหรับการดำเนินการบางอย่าง คุณต้องทราบว่าพารามิเตอร์การเปลี่ยนรูปแบบที่มีอยู่ขององค์ประกอบคืออะไร หากไม่มีค่าเหล่านี้ คุณสามารถเรียกข้อมูลโดยใช้วิธี presentations.pages.get()

การแปล

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

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

เมตริกซ์การเปลี่ยนรูปแบบการแปลพื้นฐานมีรูปแบบดังนี้

$$T=\begin{bmatrix} 1 & 0 & translate\_x\\ 0 & 1 & translate\_y\\ 0 & 0 & 1 \end{bmatrix}$$

เมื่อใช้ UpdatePageElementTransformRequest เพื่อแปลองค์ประกอบ (โดยไม่เปลี่ยนขนาด การบิดเบือน หรือการวางแนว) คุณจะใช้โครงสร้าง AffineTransform รูปแบบใดรูปแบบหนึ่งต่อไปนี้ได้

// Absolute translation:
{
  'transform': {
    'scaleX':  current scaleX value,
    'scaleY':  current scaleY value,
    'shearX':  current shearX value,
    'shearY':  current shearY value,
    'translateX': X coordinate to move to,
    'translateY': Y coordinate to move to,
    'unit': 'EMU' // or 'PT'
  }
}

// Relative translation (scaling must also be provided to avoid a matrix multiplication error):
{
  'transform': {
    'scaleX':  1,
    'scaleY':  1,
    'translateX': X coordinate to move by,
    'translateY': Y coordinate to move by,
    'unit': 'EMU' // or 'PT'
  }
}

ปรับขนาด

การปรับขนาดคือการยืดหรือบีบองค์ประกอบตามมิติข้อมูล X หรือ Y เพื่อเปลี่ยนขนาด เมตริกซ์เปลี่ยนรูปแบบการปรับขนาดพื้นฐานมีรูปแบบดังนี้

$$S=\begin{bmatrix} scale\_x & 0 & 0\\ 0 & scale\_y & 0\\ 0 & 0 & 1 \end{bmatrix}$$

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

การหมุน

การเปลี่ยนรูปแบบการหมุนจะหมุนองค์ประกอบหน้าเว็บรอบจุดหนึ่งๆ โดยใช้พารามิเตอร์การปรับขนาดและการบิด เมทริกซ์การเปลี่ยนรูปแบบการหมุนพื้นฐานมีรูปแบบดังต่อไปนี้ โดยที่มุมการหมุน (ในเรเดียน) จะวัดจากแกน X โดยทําเครื่องหมายทวนเข็มนาฬิกา

$$R=\begin{bmatrix} cos(\theta) & sin(\theta) & 0\\ -sin(\theta) & cos(\theta) & 0\\ 0 & 0 & 1 \end{bmatrix}$$

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

แสงสะท้อน

การสะท้อนจะแสดงองค์ประกอบตามเส้นหรือแกนใดแกนหนึ่ง เมทริกซ์การเปลี่ยนรูปแบบการสะท้อนในแนวแกน x และ y พื้นฐานมีรูปแบบดังนี้

$$F_x=\begin{bmatrix} 1 & 0 & 0\\ 0 & -1 & 0\\ 0 & 0 & 1\\ \end{bmatrix}\qquad\qquad F_y=\begin{bmatrix} -1 & 0 & 0\\ 0 & 1 & 0\\ 0 & 0 & 1\\ \end{bmatrix}$$

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

เฟรมอ้างอิงองค์ประกอบ

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

หากต้องการเปลี่ยนรูปแบบองค์ประกอบภายในเฟรมอ้างอิงของตัวเอง ให้ใส่องค์ประกอบนั้นไว้ระหว่างการแปลอื่นๆ 2 รายการ ได้แก่ การแปลก่อนหน้า T1 ซึ่งจะย้ายองค์ประกอบไปไว้ที่กึ่งกลางของต้นทางของหน้า และการแปลต่อท้าย T2 ซึ่งจะย้ายองค์ประกอบกลับไปยังตำแหน่งเดิม การดำเนินการทั้งหมดสามารถเขียนเป็นผลิตภัณฑ์เมทริกซ์ได้ดังนี้

$$A' = T2 \times B \times T1 \times A$$

นอกจากนี้ คุณยังเปลี่ยนไปใช้เฟรมอ้างอิงอื่นได้โดยการเปลี่ยนจุดต่างๆ ไปยังจุดเริ่มต้นแทน จุดเหล่านี้จะกลายเป็นจุดศูนย์กลางของเฟรมอ้างอิงใหม่

คุณสามารถเปลี่ยนรูปแบบแต่ละรายการแยกกันโดยส่งคำขอเปลี่ยนรูปแบบ RELATIVE ตามลำดับ คุณควรคํานวณ A' ด้านบนล่วงหน้าด้วยการคูณเมทริกซ์ และใช้ผลลัพธ์เป็นการเปลี่ยนรูปแบบ ABSOLUTE รายการเดียว หรือจะคํานวณผลลัพธ์ T2 * B * T1 ล่วงหน้าแล้วนำไปใช้เป็นการแปลง RELATIVE รายการเดียวก็ได้ การดำเนินการทั้ง 2 อย่างนี้มีประสิทธิภาพมากกว่าในแง่ของการดำเนินการ API เมื่อเทียบกับการส่งคำขอเปลี่ยนรูปแบบทีละรายการ

ข้อจำกัด

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

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

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

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

ค่าที่ผ่านการแยกย่อย

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