การดําเนินการกับองค์ประกอบ

Google Slides API ช่วยให้คุณสร้างและแก้ไขทรัพยากร PageElement ซึ่งรวมถึงกล่องข้อความ รูปภาพ ตาราง รูปร่างพื้นฐาน เส้น และ วิดีโอที่ฝัง ตัวอย่างในหน้านี้แสดงการดำเนินการกับองค์ประกอบของหน้าเว็บที่พบบ่อยบางอย่างโดยใช้ presentations.batchUpdate วิธีการ

ตัวอย่างเหล่านี้ใช้ตัวแปรต่อไปนี้

  • PRESENTATION_ID - ระบุตำแหน่งที่คุณระบุ รหัสงานนำเสนอ คุณสามารถดึงค่าของรหัสนี้จาก URL ของงานนำเสนอ
  • PAGE_ID - ระบุตำแหน่งที่คุณระบุรหัส ออบเจ็กต์ของหน้า คุณสามารถดึงค่าของรหัสนี้จาก URL หรือโดยใช้คำขออ่าน API
  • PAGE_ELEMENT_ID - ระบุตำแหน่งที่คุณระบุรหัสออบเจ็กต์ขององค์ประกอบของหน้า คุณ สามารถระบุรหัสนี้สำหรับองค์ประกอบที่คุณสร้าง (โดยมี ข้อจำกัด บางอย่าง) หรืออนุญาตให้ Slides API สร้างรหัสโดยอัตโนมัติ คุณสามารถดึงรหัสองค์ประกอบผ่านคำขออ่าน API

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

เพิ่มรายการสัญลักษณ์หัวข้อย่อยลงในกล่องข้อความ

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้วิธีการ InsertTextRequest เพื่อแทรกข้อความลงในกล่องข้อความว่างที่ระบุโดย PAGE_ELEMENT_ID. จากนั้นตัวอย่างจะใช้วิธีการ CreateParagraphBulletsRequest เพื่อแปลงข้อความทั้งหมดในกล่องข้อความเป็นรายการสัญลักษณ์หัวข้อย่อย รายการในรายการจะคั่นด้วยอักขระ \n ขณะที่การเยื้องจะควบคุมด้วยอักขระ \t

ต่อไปนี้เป็นโปรโตคอลคำขอเพื่อสร้างงานนำเสนอ

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "insertText": {
        "objectId": PAGE_ELEMENT_ID,
        "text": "My List\n\tItem 1\n\t\tItem 2\n\t\t\tItem 3",
        "insertionIndex": 0
      },
      "createParagraphBullets": {
        "objectId": PAGE_ELEMENT_ID,
        "bulletPreset": "BULLET_ARROW_DIAMOND_DISC",
        "textRange": {
          "type": "ALL"
        }
      }
    }
  ]
}

คำขอนี้สามารถสร้างรายการสัญลักษณ์หัวข้อย่อยที่มีลักษณะดังนี้

ตัวอย่างผลลัพธ์ของรายการสัญลักษณ์หัวข้อย่อย

เพิ่มรูปร่างลงในสไลด์

ตัวอย่างโค้ด presentations.batchUpdate ต่อไปนี้แสดงวิธีใช้ CreateShapeRequest วิธีการเพื่อเพิ่มรูปร่างคลื่นลงในสไลด์ที่ระบุโดย PAGE_ID คำขอนี้จะระบุประเภทรูปร่าง จากนั้นปรับขนาดและวางตำแหน่งรูปร่างในสไลด์ จากนั้นจะใช้วิธีการ InsertTextRequest เพื่อเพิ่มข้อความลงในรูปร่างนั้น คำขอจะตั้งค่ารหัสของเส้นเป็น PAGE_ELEMENT_ID

ต่อไปนี้เป็นโปรโตคอลคำขอเพื่อเพิ่มรูปร่างลงในสไลด์

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "createShape": {
        "objectId": PAGE_ELEMENT_ID,
        "elementProperties": {
          "pageObjectId": PAGE_ID,
          "size": {
            "width": {
              "magnitude": 3000000,
              "unit": "EMU"
            },
            "height": {
              "magnitude": 3000000,
              "unit": "EMU"
            }
          },
          "transform": {
            "scaleX": 0.6807,
            "scaleY": 0.4585,
            "translateX": 6583050,
            "translateY": 1673950,
            "unit": "EMU"
          }
        },
        "shapeType": "WAVE"
      }
    },
    {
      "insertText": {
        "objectId": PAGE_ELEMENT_ID,
        "text": "My Wave Shape",
        "insertionIndex": 0
      }
    }
  ]
}

เพิ่มวิดีโอลงในสไลด์

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้วิธีการ CreateVideoRequest เพื่อฝังวิดีโอลงในสไลด์ที่ระบุโดย PAGE_ID คำขอนี้จะปรับขนาดและวางตำแหน่งวิดีโอในสไลด์ และตั้งค่ารหัสของวิดีโอ เป็น PAGE_ELEMENT_ID ตัวระบุที่ไม่ซ้ำกันของวิดีโอต้นทางจะ ตั้งค่าเป็น VIDEO_ID เช่น วิดีโอ YouTube ที่ https://www.youtube.com/watch?v=7U3axjORYZ0 มีรหัสเป็น 7U3axjORYZ0

ต่อไปนี้เป็นโปรโตคอลคำขอเพื่อเพิ่มวิดีโอลงในสไลด์

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "createVideo": {
        "objectId": PAGE_ELEMENT_ID,
        "elementProperties": {
          "pageObjectId": PAGE_ID,
          "size": {
            "width": {
              "magnitude": 12000,
              "unit": "EMU"
            },
            "height": {
              "magnitude": 9000,
              "unit": "EMU"
            }
          },
          "transform": {
            "scaleX": 381,
            "scaleY": 381,
            "translateX": 152400,
            "translateY": 152400,
            "unit": "EMU"
          }
        },
        "source": "YOUTUBE",
        "id": VIDEO_ID
      }
    }
  ]
}

คัดลอกและแก้ไของค์ประกอบ

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้วิธีการ DuplicateObjectRequest เพื่อนำรูปร่างที่มีอยู่ (ระบุโดย PAGE_ELEMENT_ID) และสร้างสำเนา (ระบุโดย COPY_ELEMENT_ID)

จากนั้นคำขอที่ตามมาจะทำการเปลี่ยนแปลงต่อไปนี้กับออบเจ็กต์ที่ซ้ำกัน

  • ตั้งค่าสีพื้นหลังเป็นสีธีม LIGHT2
  • ย้ายสำเนาลงไปในหน้า (จากตำแหน่งของรูปร่างเดิม)
  • ตั้งค่าแบบอักษรของข้อความเป็น Georgia ขนาด 18 พอยต์
  • แก้ไขข้อความเป็น "สำเนาของรูปร่างของฉัน"

คำขอที่นี่ใช้ มาสก์ของช่อง เพื่อเก็บรักษา พร็อพเพอร์ตี้ของรูปร่างที่ไม่ได้เปลี่ยนแปลง (เช่น รูปแบบเส้นขอบ) การใช้มาสก์ของช่องยังช่วยปรับปรุงประสิทธิภาพด้วย

ดูข้อมูลเพิ่มเติมเกี่ยวกับการคัดลอกสไลด์ได้ที่ตัวอย่างการคัดลอก สไลด์

ต่อไปนี้เป็นโปรโตคอลคำขอเพื่อคัดลอกและแก้ไของค์ประกอบ

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "duplicateObject": {
        "objectId": PAGE_ELEMENT_ID,
        "objectIds": {
          PAGE_ELEMENT_ID: COPY_ELEMENT_ID
        }
      }
    },
    {
      "updateShapeProperties": {
        "objectId": COPY_ELEMENT_ID,
        "fields": "shapeBackgroundFill.solidFill.color",
        "shapeProperties": {
          "shapeBackgroundFill": {
            "solidFill": {
              "color": {
                "themeColor": "LIGHT2"
              }
            }
          }
        }
      }
    },
    {
      "updatePageElementTransform": {
        "objectId": COPY_ELEMENT_ID,
        "applyMode": "RELATIVE",
        "transform": {
          "scaleX": 1,
          "scaleY": 1,
          "translateX": 0,
          "translateY": 1250000,
          "unit": "EMU"
        }
      }
    },
    {
      "updateTextStyle": {
        "objectId": COPY_ELEMENT_ID,
        "fields": "fontFamily,fontSize",
        "textRange": {
          "type": "ALL"
        },
        "style": {
          "fontFamily": "Georgia",
          "fontSize": {
            "magnitude": 18,
            "unit": "PT"
          }
        }
      }
    },
    {
      "deleteText": {
        "objectId": COPY_ELEMENT_ID,
        "textRange": {
          "type": "ALL"
        }
      }
    },
    {
      "insertText": {
        "objectId": COPY_ELEMENT_ID,
        "text": "My Shape Copy",
        "insertionIndex": 0
      }
    }
  ]
}

รูปร่างและสำเนาอาจมีลักษณะดังนี้หลังจากการอัปเดต

คัดลอกและแก้ไขผลลัพธ์ตัวอย่างขององค์ประกอบ

แก้ไขเส้นขอบของรูปภาพหรือวิดีโอ

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้วิธีการ UpdateImagePropertiesRequest เพื่ออัปเดตลักษณะที่ปรากฏของเส้นขอบของรูปภาพที่ระบุโดย IMAGE_ELEMENT_ID นอกจากนี้ยังใช้วิธีการ UpdateVideoPropertiesRequest เพื่ออัปเดตลักษณะที่ปรากฏของเส้นขอบของวิดีโอที่ฝังที่ระบุโดย VIDEO_ELEMENT_ID

คำขอจะทำการเปลี่ยนแปลงต่อไปนี้กับออบเจ็กต์

  • ตั้งค่าสีเส้นขอบของรูปภาพเป็นสีธีม ACCENT5 โดยมีความโปร่งใสบางส่วน
  • ตั้งค่าสีเส้นขอบของวิดีโอเป็นสีธีม ACCENT1 โดยไม่มีความโปร่งใส
  • ตั้งค่าความหนาของเส้นขอบเป็น 3 พอยต์สำหรับทั้ง 2 รายการ
  • ตั้งค่ารูปแบบเส้นขอบของรูปภาพเป็น SOLID
  • ตั้งค่ารูปแบบโครงร่างวิดีโอเป็น DASH_DOT

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

ต่อไปนี้เป็นโปรโตคอลคำขอเพื่อแก้ไขโครงร่างวิดีโอหรือรูปภาพ

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "updateImageProperties": {
        "objectId": IMAGE_ELEMENT_ID,
        "fields": "outline",
        "imageProperties": {
          "outline": {
            "dashStyle": "SOLID",
            "outlineFill": {
              "solidFill": {
                "alpha": 0.8,
                "color": {
                  "themeColor": "ACCENT5"
                }
              }
            },
            "weight": {
              "magnitude": 3,
              "unit": "PT"
            }
          }
        }
      }
    },
    {
      "updateVideoProperties": {
        "objectId": VIDEO_ELEMENT_ID,
        "fields": "outline",
        "videoProperties": {
          "outline": {
            "dashStyle": "DASH_DOT",
            "outlineFill": {
              "solidFill": {
                "alpha": 0.8,
                "color": {
                  "themeColor": "ACCENT1"
                }
              }
            },
            "weight": {
              "magnitude": 3,
              "unit": "PT"
            }
          }
        }
      }
    }
  ]
}

รูปภาพและวิดีโอที่ฝังอาจมีลักษณะดังนี้หลังจากการอัปเดต

ตัวอย่างโครงร่างรูปภาพและวิดีโอ result

แก้ไขเส้นขอบของรูปร่าง

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้ UpdateShapePropertiesRequest วิธีการเพื่อนำรูปร่างที่มีอยู่ (ระบุโดย PAGE_ELEMENT_ID) และอัปเดตลักษณะที่ปรากฏของเส้นขอบ

คำขอจะทำการเปลี่ยนแปลงต่อไปนี้กับออบเจ็กต์

  • ตั้งค่าสีเส้นขอบเป็นสีธีม ACCENT5 โดยมีความโปร่งใสบางส่วน
  • ตั้งค่าความหนาของเส้นขอบเป็น 3 พอยต์
  • ตั้งค่ารูปแบบเส้นขอบเป็น LONG_DASH

คำขอที่นี่ใช้มาสก์ของช่องเพื่อเก็บรักษา พร็อพเพอร์ตี้ของรูปร่างที่ไม่ได้เปลี่ยนแปลง (เช่น สีเติมของรูปร่าง) การใช้มาสก์ของช่องยังช่วยปรับปรุงประสิทธิภาพด้วย

ต่อไปนี้เป็นโปรโตคอลคำขอเพื่อแก้ไขเส้นขอบของรูปร่าง

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "updateShapeProperties": {
        "objectId": PAGE_ELEMENT_ID,
        "fields": "outline",
        "shapeProperties": {
          "outline": {
            "dashStyle": "LONG_DASH",
            "outlineFill": {
              "solidFill": {
                "alpha": 0.6,
                "color": {
                  "themeColor": "ACCENT5"
                }
              }
            },
            "weight": {
              "magnitude": 3,
              "unit": "PT"
            }
          }
        }
      }
    }
  ]
}

รูปร่างอาจมีลักษณะดังนี้หลังจากการอัปเดต

แก้ไขผลลัพธ์ตัวอย่างของโครงร่าง

จัดรูปแบบข้อความในรูปร่างหรือกล่องข้อความ

ตัวอย่างโค้ด presentations.batchUpdate ต่อไปนี้แสดงวิธีใช้วิธีการ UpdateTextStyleRequest เพื่อนำรูปร่างที่มีอยู่ (ระบุโดย PAGE_ELEMENT_ID) และอัปเดตลักษณะที่ปรากฏของข้อความ

คำขอจะทำการเปลี่ยนแปลงต่อไปนี้กับออบเจ็กต์

  • ตั้งค่าสีข้อความเป็นสีธีม ACCENT5
  • ตั้งค่าแบบอักษรเป็น Corsiva ขนาด 18 พอยต์ ตัวหนา ตัวเอียง
  • ขีดเส้นใต้ข้อความ

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

ต่อไปนี้เป็นโปรโตคอลคำขอเพื่อจัดรูปแบบข้อความในรูปร่างหรือกล่องข้อความ

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "updateTextStyle": {
        "objectId": PAGE_ELEMENT_ID,
        "fields": "foregroundColor,bold,italic,fontFamily,fontSize,underline",
        "style": {
          "foregroundColor": {
            "opaqueColor": {
              "themeColor": "ACCENT5"
            }
          },
          "bold": true,
          "italic": true,
          "underline": true,
          "fontFamily": "Corsiva",
          "fontSize": {
            "magnitude": 18,
            "unit": "PT"
          }
        },
        "textRange": {
          "type": "ALL"
        }
      }
    }
  ]
}

ข้อความในรูปร่างอาจมีลักษณะดังนี้หลังจากการอัปเดต

ตัวอย่างการแก้ไขรูปแบบข้อความ ผลลัพธ์

นำเข้าแผนภูมิจาก Google ชีต

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้ CreateSheetsChartRequest วิธีการเพื่อนำเข้าแผนภูมิจากชีตและวางแผนภูมิลงในสไลด์ที่ระบุโดย PAGE_ID.

คำขอต้องใช้รหัสสเปรดชีต (ระบุโดย SPREADSHEET_ID) และรหัสแผนภูมิสเปรดชีต (ระบุโดย SPREADSHEET_CHART_ID) โดยรหัสแผนภูมิภายใน งานนำเสนอ Slides จะระบุโดย PRESENTATION_CHART_ID

นอกจากนี้ คำขอยังตั้งค่า LinkingMode ของแผนภูมิ Slides เป็น LINKED เพื่อให้คุณอัปเดต แผนภูมิที่ฝังได้หากแผนภูมิในสเปรดชีตต้นทางได้รับการอัปเดต

ต่อไปนี้เป็นโปรโตคอลคำขอเพื่อนำเข้าแผนภูมิจากชีต

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "createSheetsChart": {
        "objectId": PRESENTATION_CHART_ID,
        "spreadsheetId": SPREADSHEET_ID,
        "chartId": SPREADSHEET_CHART_ID,
        "linkingMode": "LINKED",
        "elementProperties": {
          "pageObjectId": PAGE_ID,
          "size": {
            "width": {
              "magnitude": 4000000,
              "unit": "EMU"
            },
            "height": {
              "magnitude": 4000000,
              "unit": "EMU"
            }
          },
          "transform": {
            "scaleX": 1,
            "scaleY": 1,
            "translateX": 100000,
            "translateY": 100000,
            "unit": "EMU"
          }
      }
    }
  ]
}

รีเฟรชแผนภูมิจากชีต

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

ต่อไปนี้เป็นโปรโตคอลคำขอเพื่อรีเฟรชแผนภูมิจากชีต

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "refreshSheetsChart": {
        "objectId": PRESENTATION_CHART_ID
      }
    }
  ]
}