Google สไลด์ API ช่วยให้คุณจัดการตำแหน่ง ขนาด และการวางแนวของ PageElement (กล่องข้อความ รูปภาพ ตาราง และรูปร่างพื้นฐาน) ในหน้าเว็บโดยรักษาเส้นให้ตรงและรักษาเส้นขนานไว้ได้ หรือที่เรียกว่า Aaffine Transformations ตัวอย่างด้านล่างแสดงการดําเนินการเปลี่ยนรูปแบบองค์ประกอบของหน้าโดยทั่วไปโดยใช้เมธอด presentations.batchUpdate
ตัวอย่างเหล่านี้ใช้ตัวแปรต่อไปนี้
- PRESENTATION_ID - ระบุตำแหน่งที่คุณให้รหัสงานนำเสนอ คุณดูค่าสำหรับรหัสนี้ได้จาก URL ของงานนำเสนอ
- PAGE_ID - ระบุตำแหน่งที่คุณระบุรหัสออบเจ็กต์หน้าเว็บ คุณดึงค่าสำหรับค่านี้จาก URL หรือโดยใช้คำขออ่าน API ก็ได้
- PAGE_ELEMENT_ID - ระบุตำแหน่งที่คุณระบุรหัสออบเจ็กต์องค์ประกอบของหน้า คุณสามารถระบุรหัสนี้สำหรับองค์ประกอบที่สร้างขึ้น (โดยมีข้อจำกัดบางอย่าง) หรืออนุญาตให้ Slides 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 x 12,700 = 635,000 EMU) ใต้ขอบบนของลูกศร พิกัด X ของสี่เหลี่ยมผืนผ้าใหม่ควรเหมือนกับพิกัด X ของลูกศร เพื่อให้เส้นขอบด้านซ้ายอยู่ในแนวเดียวกัน พิกัด Y จะเหมือนกับพิกัด Y ของลูกศรบวกกับ 50 pt เนื่องจากระยะทางจะวัดจากด้านบนของลูกศร พิกัดของรูปสี่เหลี่ยมผืนผ้าคือ
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
คำขอที่สองจะสร้างวงกลมกว้าง 40 pt ที่มีเส้นกึ่งกลางแนวนอนเหมือนกับลูกศรตัวอย่าง แต่อยู่ในตำแหน่งที่ 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)
คำขอที่สองในกลุ่มจะย้ายลูกศรจากจุดนั้น โดยคราวนี้จะมี 40,000 EMU
ไปทางขวาและ 35,000 การเปลี่ยนรูปของ EMU แบบสัมพัทธ์ ในรูปของการแปลงรูปแบบสัมพัทธ์ (ใช้การเปลี่ยนรูปของ EMU แบบสัมพัทธ์) applyMode
หลังจากดำเนินการกับทั้ง 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 เพื่อแสดงองค์ประกอบของหน้าตัวอย่างรูปลูกศรในแนวนอนตามกึ่งกลาง โดยไม่เปลี่ยนตำแหน่งในหน้าหรือการปรับขนาด
ซึ่งทำได้โดยใช้การเปลี่ยนรูปแบบการสะท้อนพื้นฐานในเฟรมอ้างอิงขององค์ประกอบ เพื่อความชัดเจน ระบบจะแสดงการเปลี่ยนเฟรมการอ้างอิงและการสะท้อนพร้อมกับการเรียกเมธอด 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"
}
}
}
]
}