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
(point)
{ "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
เพื่อสร้างรูปร่างใหม่ในตำแหน่งที่ถูกต้องซึ่งสอดคล้องกับรูปร่างลูกศรตัวอย่าง ในหน้าเว็บ ในทั้งสองกรณี จะต้องคำนวณพิกัด X และ Y ของมุมซ้ายบนของรูปร่างใหม่
คำขอแรกสร้างสี่เหลี่ยมผืนผ้าขนาด 100 x 50 pt ซึ่งอยู่ในแนวเดียวกับขอบด้านซ้ายของรูปร่างลูกศร แต่อยู่ในตำแหน่ง 50 pt (50 * 12,700 = 635,000 EMU) ด้านล่างขอบบนของลูกศร พิกัด X ของสี่เหลี่ยมผืนผ้าใหม่ควรเท่ากับ พิกัด X ของลูกศรเพื่อให้ขอบด้านซ้ายอยู่ในแนวเดียวกัน พิกัด Y เป็นค่าเดียวกับพิกัด Y ของลูกศรที่บวก 50 pt เนื่องจากระยะทางวัดจากด้านบนของลูกศร พิกัดของรูปสี่เหลี่ยมผืนผ้า มีดังต่อไปนี้
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
คำขอที่ 2 สร้างวงกลมกว้าง 40 พอยต์ที่มีเส้นกึ่งกลางแนวนอนเหมือนกับลูกศรตัวอย่าง แต่จัดตำแหน่ง 100 พอยต์ (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
)
คำขอที่สองในแบทช์ย้ายลูกศรจากตรงนั้น คราวนี้เท่ากับ 40,000 EMU ไปตำแหน่งด้านขวาและ 35,000
การเปลี่ยนการวางแนวของ EMU (โดยใช้การเปลี่ยนการวางแนว
1 รายการแบบสัมพัทธ์) (โดยใช้การเปลี่ยนการวางแนวของapplyMode
แบบสัมพัทธ์ applyMode
)
หลังจากดำเนินการตามคำขอทั้งสองแล้ว มุมซ้ายบนของลูกศรจะอยู่ที่พิกัด (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
เพื่อแสดงองค์ประกอบหน้ารูปร่างลูกศรตัวอย่างแนวนอนตามตรงกลาง โดยไม่เปลี่ยนตำแหน่งในหน้าเว็บหรือปรับขนาด
ทำได้โดยใช้การเปลี่ยนรูปแบบการสะท้อนพื้นฐานในเฟรมอ้างอิงขององค์ประกอบ เพื่อความชัดเจน การเปลี่ยนเฟรมอ้างอิงและการสะท้อนจะแสดงพร้อมกับการเรียกใช้เมธอด UpdatePageElementTransformRequest
แยกกัน 3 รายการ แต่การประมวลผลผลคูณของเมทริกซ์การเปลี่ยนรูปแบบเหล่านี้ก่อนแล้วจึงใช้ผลิตภัณฑ์นั้นเป็นคำขอเดียวจะมีประสิทธิภาพมากกว่า
สำหรับการเปลี่ยนรูปแบบคำแปล ระบบจะย้ายกึ่งกลางของรูปร่างลูกศรไปยังและจากต้นทาง ค่าพารามิเตอร์แสดงเป็นการคำนวณเพื่อความชัดเจน
ต่อไปนี้คือโปรโตคอลคำขอที่จะแสดงองค์ประกอบ
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% ของความสูงปัจจุบัน โดยรักษากึ่งกลางของลูกศรให้อยู่ในตำแหน่งเดิมและคงการวางแนวไว้
ซึ่งทำได้โดยใช้การเปลี่ยนรูปแบบการปรับขนาดพื้นฐานในเฟรมอ้างอิงขององค์ประกอบ เพื่อความชัดเจน การเปลี่ยนเฟรมอ้างอิงและการปรับขนาดจะแสดงพร้อมกับการเรียกใช้เมธอด UpdatePageElementTransformRequest
แยกกัน 3 รายการ แต่การประมวลผลผลคูณของเมทริกซ์การเปลี่ยนรูปแบบเหล่านี้ก่อนแล้วจึงใช้ผลิตภัณฑ์นั้นเป็นคำขอเดียวจะมีประสิทธิภาพมากกว่า
สำหรับการเปลี่ยนรูปแบบคำแปล ระบบจะย้ายกึ่งกลางของรูปร่างลูกศรไปยังและจากต้นทาง ค่าพารามิเตอร์แสดงเป็นการคำนวณเพื่อความชัดเจน
ต่อไปนี้เป็นโปรโตคอลคำขอในการปรับขนาดองค์ประกอบ
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 องศาทวนเข็มนาฬิกา ขณะเดียวกันก็รักษากึ่งกลางของลูกศรให้อยู่ในตำแหน่งเดิมและคงขนาดไว้เหมือนเดิม
ทำได้โดยใช้การเปลี่ยนรูปแบบการหมุนพื้นฐานในเฟรมอ้างอิงขององค์ประกอบ เพื่อความชัดเจน การเปลี่ยนเฟรมและการหมุนจะแสดงพร้อมกับการเรียกใช้เมธอด UpdatePageElementTransformRequest
แยกกัน 3 รายการ แต่การประมวลผลผลคูณของเมทริกซ์การเปลี่ยนรูปแบบเหล่านี้ก่อนแล้วจึงใช้ผลิตภัณฑ์นั้นเป็นคำขอเดียวจะมีประสิทธิภาพมากกว่า
สำหรับการเปลี่ยนรูปแบบคำแปล ระบบจะย้ายกึ่งกลางของรูปร่างลูกศรไปยังและจากต้นทาง ค่าพารามิเตอร์แสดงเป็นการคำนวณเพื่อความชัดเจน
ต่อไปนี้เป็นโปรโตคอลคำขอในการหมุนองค์ประกอบเกี่ยวกับจุดศูนย์กลาง
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" } } } ] }