การดําเนินการเปลี่ยนรูปแบบ

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"
        }
      }
    }
  ]
}