Google สไลด์ API ช่วยให้คุณจัดการสถานที่ ขนาด และการวางแนวของ
PageElement
(ช่องข้อความ รูปภาพ ตาราง และรูปร่างพื้นฐาน) บนหน้าเว็บขณะที่ยังคงวาดเส้นอยู่
เส้นตรงและรักษาจุดและเส้นขนาน ซึ่งเราเรียกว่ากลุ่มความสนใจ
การเปลี่ยนรูปแบบ ตัวอย่างที่นี่แสดงการแปลงองค์ประกอบของหน้าโดยทั่วไป
ที่ดำเนินการโดยใช้
presentations.batchUpdate
ตัวอย่างต่อไปนี้ใช้ตัวแปรต่อไปนี้
- PRESENTATION_ID - ระบุตำแหน่งที่คุณให้บริการ งานนำเสนอ รหัส คุณสามารถ ค้นหาค่าของรหัสนี้จาก URL ของงานนำเสนอ
- PAGE_ID - ระบุตำแหน่งที่คุณระบุออบเจ็กต์หน้าเว็บ รหัส คุณสามารถดึงข้อมูล ค่าของข้อมูลนี้จาก URL หรือโดยใช้คำขออ่าน API
- PAGE_ELEMENT_ID— ระบุตำแหน่งที่คุณใส่หน้าเว็บ รหัสออบเจ็กต์องค์ประกอบ คุณ สามารถระบุรหัสนี้สำหรับองค์ประกอบที่คุณสร้าง (โดยมี ข้อจำกัด) หรืออนุญาตให้สไลด์ API สร้างให้โดยอัตโนมัติ รหัสองค์ประกอบ สามารถดึงข้อมูลผ่านคำขออ่าน API ได้
ตัวอย่างเหล่านี้จะแสดงเป็นคำขอ HTTP เพื่อเป็นกลางทางภาษา เพื่อเรียนรู้ วิธีนำการอัปเดตแบบกลุ่มไปใช้ในภาษาต่างๆ โดยใช้ Google API ไลบรารีของไคลเอ็นต์ โปรดดูเพิ่มรูปร่างและ ข้อความ
ตัวอย่างรูปร่างลูกศร
สำหรับตัวอย่างด้านล่าง ให้สมมติว่ามีตัวอย่างหน้ารูปร่างลูกศร
ที่มีขนาดและแปลงข้อมูลดังต่อไปนี้ (ซึ่งสามารถดูได้ด้วยแอตทริบิวต์
presentations.pages.get
คำขอเมธอด) รูปร่างตัวอย่างใช้การวัด
unit
EMU (หน่วยเมตริกภาษาอังกฤษ) และ pt
(พอยต์)
{ "objectId": PAGE_ELEMENT_ID, "size": { "width": { "magnitude": 3000000, "unit": "EMU" }, "height": { "magnitude": 3000000, "unit": "EMU" } }, "transform": { "scaleX": 0.3, "scaleY": 0.12, "shearX": 0, "shearY": 0, "translateX": 2000000, "translateY": 550000, "unit": "EMU" }, "shape": { "shapeType": "RIGHT_ARROW" } }
จัดองค์ประกอบให้ตรงกับองค์ประกอบอื่น
ดังต่อไปนี้
presentations.batchUpdate
ตัวอย่างโค้ดจะแสดงวิธีใช้
CreateShapeRequest
เพื่อสร้างรูปร่างใหม่ในตำแหน่งที่ถูกต้องซึ่งสอดคล้องกับ
ตัวอย่างรูปร่างลูกศรในหน้า ในทั้ง 2 กรณี ค่า X และ Y
ต้องคำนวณพิกัดมุมซ้ายบนของรูปร่างใหม่
คำขอแรกสร้างสี่เหลี่ยมผืนผ้าขนาด 100 x 50 pt ที่จัดชิดซ้าย เส้นขอบของรูปร่างลูกศร แต่อยู่ในตำแหน่ง 50 pt (50 * 12,700 = 635,000 EMU) ด้านล่างขอบด้านบนของลูกศร พิกัด X ของสี่เหลี่ยมผืนผ้าใหม่ควรเป็น เหมือนกับพิกัด X ของลูกศรเพื่อให้เส้นขอบด้านซ้ายอยู่ในแนวเดียวกัน Y พิกัดจะเท่ากับพิกัด Y ของลูกศรบวก 50 จุด เนื่องจาก ระยะทางวัดจากด้านบนของลูกศร พิกัดของรูปสี่เหลี่ยมผืนผ้าคือ ดังนั้น:
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
คำขอที่ 2 สร้างวงกลมกว้าง 40 พอยต์ที่มีแนวนอนเหมือนกัน เส้นกึ่งกลางเหมือนลูกศรตัวอย่าง แต่อยู่ในตำแหน่ง 100 pt (1,270,000 EMU) ถึง จากขอบด้านขวาของลูกศร พิกัด X ของวงกลมคือผลรวมของ พิกัด X ของลูกศร ความกว้างลูกศร และ 100 pt. บังคับใช้เส้นกึ่งกลาง การจัดแนวสำหรับวงกลมใหม่ ต้องคำนึงถึงความสูงของทั้ง ลูกศรและวงกลม พิกัด Y ของวงกลมคือพิกัด Y ของลูกศร บวกครึ่งหนึ่งของความสูงของลูกศร ลบด้วยความสูงของวงกลมครึ่งหนึ่ง ในทั้ง 2 กรณี ฟิลด์ ต้องคำนึงถึงปัจจัยการปรับขนาดที่เชื่อมโยงกับลูกศรด้วย เนื่องจากมีผลต่อความกว้างและความสูงที่แสดงผลของลูกศร แวดวง พิกัดจะเป็น:
x = 2000000 + (0.3 * 3000000) + (100 * 12700) = 4170000 EMU y = 550000 + (0.5 * 0.12 * 3000000) - (0.5 * 40 * 12700) = 476000 EMU
ต่อไปนี้เป็นโปรโตคอลคำขอในการจัดเรียงองค์ประกอบให้สอดคล้องกับรายการอื่น
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{ "requests": [ { "createShape": { "shapeType": "RECTANGLE", "elementProperties": { "pageObjectId": PAGE_ID, "size": { "width": { "magnitude": 100, "unit": "PT" }, "height": { "magnitude": 50, "unit": "PT" } }, "transform": { "scaleX": 1, "scaleY": 1, "translateX": 2000000, "translateY": 1185000, "unit": "EMU" } } } }, { "createShape": { "shapeType": "ELLIPSE", "elementProperties": { "pageObjectId": PAGE_ID, "size": { "width": { "magnitude": 40, "unit": "PT" }, "height": { "magnitude": 40, "unit": "PT" } }, "transform": { "scaleX": 1, "scaleY": 1, "translateX": 4170000, "translateY": 476000, "unit": "EMU" } } } } ] }
ย้ายองค์ประกอบ
ดังต่อไปนี้
presentations.batchUpdate
ตัวอย่างโค้ดจะแสดงวิธีใช้
UpdatePageElementTransformRequest
วิธีการแปลองค์ประกอบหน้าเว็บรูปลูกศรตัวอย่างใน
2 วิธี
คำขอแรกในกลุ่มย้ายลูกศรไปยัง (X,Y) = (2000000, 150000)
พิกัด EMU (ใช้การแปลแบบสัมบูรณ์)
applyMode
)
คำขอที่ 2 ในกลุ่มจะย้ายลูกศรจากจุดนั้น โดยคราวนี้เท่ากับ 40,000 EMU
ทางด้านขวาและ 35,000 EMU ชี้ขึ้น (โดยใช้การแปลแบบสัมพัทธ์ applyMode
)
การใช้ transformation1 เมทริกซ์
สร้างขึ้นเพื่อหลีกเลี่ยงการปรับเปลี่ยนขนาดและการวางแนวขององค์ประกอบ
หลังจากดำเนินการตามคำขอทั้ง 2 รายการ มุมซ้ายบนของลูกศรจะอยู่ที่ (X,Y) = (2040000, 115000) พิกัด EMU
โปรโตคอลคำขอย้ายองค์ประกอบมีดังนี้
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{ "requests": [ { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "ABSOLUTE", "transform": { "scaleX": 0.3, "scaleY": 0.12, "translateX": 2000000, "translateY": 150000, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": 40000, "translateY": -35000, "unit": "EMU" } } } ] }
แสดงองค์ประกอบ
ดังต่อไปนี้
presentations.batchUpdate
ตัวอย่างโค้ดจะแสดงวิธีใช้
UpdatePageElementTransformRequest
เพื่อแสดงองค์ประกอบหน้าเว็บรูปลูกศรตัวอย่าง
ในแนวนอนตามกึ่งกลาง โดยไม่เปลี่ยนตำแหน่งบนหน้าเว็บหรือ
การปรับขนาด
ซึ่งทำโดยใช้การสะท้อนความคิดพื้นฐาน
transform ในการอ้างอิงขององค์ประกอบ
เฟรมของคุณ และเพื่อความชัดเจน
การเปลี่ยนเฟรมอ้างอิงและการสะท้อนจะแสดงโดยแยกการเรียกไปยัง
UpdatePageElementTransformRequest
แต่การคํานวณผลคูณของการเปลี่ยนรูปแบบเหล่านี้ล่วงหน้าจะมีประสิทธิภาพมากกว่า
เมทริกซ์ แล้วใช้ผลคูณนั้นเป็นคำขอเดียว
สำหรับการแปลงการแปลค่า จะมีการย้ายจุดศูนย์กลางของรูปร่างลูกศรไปยังจุดเริ่มต้นและจุดสิ้นสุด ค่าพารามิเตอร์ แสดงเป็นการคำนวณเพื่อความชัดเจน
ต่อไปนี้คือโปรโตคอลคำขอที่จะแสดงองค์ประกอบ
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{ "requests": [ { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": -2000000 - 0.5 * 0.3 * 3000000, "translateY": -550000 - 0.5 * 0.12 * 3000000, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": -1, "scaleY": 1, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": 2000000 + 0.5 * 0.3 * 3000000, "translateY": 550000 + 0.5 * 0.12 * 3000000, "unit": "EMU" } } } ] }
ปรับขนาดองค์ประกอบ
ดังต่อไปนี้
presentations.batchUpdate
ตัวอย่างโค้ดจะแสดงวิธีใช้
UpdatePageElementTransformRequest
วิธีปรับขนาดองค์ประกอบหน้ารูปร่างลูกศรตัวอย่างเป็น 50%
กว้างขึ้นและมีเพียง 80% ของความสูงปัจจุบัน ขณะเดียวกันก็รักษากึ่งกลางของลูกศรไว้
ด้วยตำแหน่งเดิมและคงการวางแนวไว้
ซึ่งทำโดยใช้การปรับขนาดพื้นฐาน
transform ในการอ้างอิงขององค์ประกอบ
เฟรมของคุณ และเพื่อความชัดเจน
การเปลี่ยนเฟรมอ้างอิงและการปรับขนาดปรากฏโดยแยกการเรียกไปยัง
UpdatePageElementTransformRequest
แต่การคํานวณผลคูณของการเปลี่ยนรูปแบบเหล่านี้ล่วงหน้าจะมีประสิทธิภาพมากกว่า
เมทริกซ์ แล้วใช้ผลคูณนั้นเป็นคำขอเดียว
สำหรับการแปลงการแปลค่า จะมีการย้ายจุดศูนย์กลางของรูปร่างลูกศรไปยังจุดเริ่มต้นและจุดสิ้นสุด ค่าพารามิเตอร์ แสดงเป็นการคำนวณเพื่อความชัดเจน
ต่อไปนี้เป็นโปรโตคอลคำขอในการปรับขนาดองค์ประกอบ
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{ "requests": [ { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": -2000000 - 0.5 * 0.3 * 3000000, "translateY": -550000 - 0.5 * 0.12 * 3000000, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1.5, "scaleY": 0.8, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": 2000000 + 0.5 * 0.3 * 3000000, "translateY": 550000 + 0.5 * 0.12 * 3000000, "unit": "EMU" } } } ] }
หมุนองค์ประกอบให้อยู่กึ่งกลาง
ดังต่อไปนี้
presentations.batchUpdate
ตัวอย่างโค้ดจะแสดงวิธีใช้
UpdatePageElementTransformRequest
วิธีหมุนองค์ประกอบหน้าเว็บรูปร่างลูกศรตัวอย่าง 35
องศาทวนเข็มนาฬิกา แต่ให้จุดศูนย์กลางของลูกศรอยู่ในตำแหน่งเดียวกัน
และคงขนาดของช่องไว้
โดยใช้การหมุนเวียนแบบพื้นฐาน
transform ในการอ้างอิงขององค์ประกอบ
เฟรมของคุณ และเพื่อความชัดเจน
การเปลี่ยนและการหมุนเฟรมอ้างอิงจะแสดงโดยแยกการเรียกไปยัง
UpdatePageElementTransformRequest
แต่การคํานวณผลคูณของการเปลี่ยนรูปแบบเหล่านี้ล่วงหน้าจะมีประสิทธิภาพมากกว่า
เมทริกซ์ แล้วนำผลผลิตนั้นไปใช้เป็นคำขอเดียว
สำหรับการแปลงการแปลค่า จะมีการย้ายจุดศูนย์กลางของรูปร่างลูกศรไปยังจุดเริ่มต้นและจุดสิ้นสุด ค่าพารามิเตอร์ แสดงเป็นการคำนวณเพื่อความชัดเจน
ต่อไปนี้เป็นโปรโตคอลคำขอในการหมุนองค์ประกอบเกี่ยวกับจุดศูนย์กลาง
POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{ "requests": [ { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": -2000000 - 0.5 * 0.3 * 3000000, "translateY": -550000 - 0.5 * 0.12 * 3000000, "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": cos(35 * (pi/180)), "scaleY": cos(35 * (pi/180)), "shearX": sin(35 * (pi/180)), "shearY": -sin(35 * (pi/180)), "unit": "EMU" } } }, { "updatePageElementTransform": { "objectId": PAGE_ELEMENT_ID, "applyMode": "RELATIVE", "transform": { "scaleX": 1, "scaleY": 1, "translateX": 2000000 + 0.5 * 0.3 * 3000000, "translateY": 550000 + 0.5 * 0.12 * 3000000, "unit": "EMU" } } } ] }