網頁、網頁元素和屬性

如要有效使用 Slides API,您必須瞭解簡報及其元件的架構,以及這些元件之間的互動。本頁面詳細說明下列主題:

  • 簡報元件的概念模型
  • API 如何呈現這些元件
  • 元件的樣式屬性

閱讀本文和其他概念總覽,有助於您理解及使用使用指南、參考文件和程式碼範例。

簡報、頁面和網頁元素

Google 簡報中最外層的容器元素是簡報。這個單位可以儲存在 Google 雲端硬碟、與其他使用者共用等。

每份簡報都包含各種類型的頁面。其中一種頁面是投影片,也就是簡報在螢幕上顯示時,使用者看到並切換的頁面。

每個頁面都包含多個頁面元素,這些元素共同構成頁面內容,如下圖所示:

簡報架構圖

除了投影片外,您也可以將設計套用至其他類型的頁面,讓多張投影片呈現一致的外觀。這些其他頁面類型為「主頁」和「版面配置」,其屬性決定投影片的算繪方式,如下圖所示:

主題架構圖

主頁:主頁有兩個用途。主投影片上的預留位置包含整份簡報使用的預設文字樣式。主投影片上的背景和任何其他形狀,會構成所有以該主投影片為基礎的投影片的預設背景。如果您想在簡報的每張投影片中顯示公司標誌,請將標誌放在主投影片上。

版面配置:版面配置範本決定每種投影片的內容排列方式。舉例來說,如果您希望所有標題投影片都呈現特定樣式,可以編輯標題版面配置範本。

另外還有兩種頁面:備忘稿頁面和備忘稿母片,主要用於處理演講者備忘稿。

API 表示法類型和結構

本節說明上述 Google 簡報概念模型在 Slides API 中的呈現方式。

下圖說明簡報、頁面和網頁元素在 Slides API 中做為類型的關係:

erd-style diagram

以下各節說明這些類型在 JSON 中的表示方式。

簡報

簡報包含多個屬性,以及其中的頁面:

{
  "presentationId": string,
  "pageSize": { object(Size) },
  "slides": [ { object(Page) } ],
  "title": string,
  "masters": [ { object(Page) } ],
  "layouts": [ { object(Page) } ],
  "notesMaster": object(Page),
  "locale": string,
}

頁面

頁面包含一組屬性,以及其中的網頁元素:

{
  "objectId": string,
  "pageType": enum(PageType),
  "pageElements": [ { object(PageElement) } ],
  "pageProperties": { object(PageProperties) },

  // Union field properties can be only one of the following:
  "slideProperties": { object(SlideProperties) },
  "layoutProperties": { object(LayoutProperties) },
  "notesProperties": { object(NotesProperties) },
  // End of list of possible types for union field properties.
}

網頁元素

網頁元素是放置在網頁上的視覺元件。API 中的網頁元素包含多個屬性,其中一個欄位會根據網頁元素類型而有所不同:

{
  "objectId": string,
  "size": { object(Size) },
  "transform": { object(AffineTransform) },
  "title": string,
  "description": string,

  // Union field element_kind can be only one of the following:
  "elementGroup": { object(Group) },
  "shape": { object(Shape) },
  "image": { object(Image) },
  "video": { object(Video) },
  "line": { object(Line) },
  "table": { object(Table) },
  "wordArt": { object(WordArt) },
  "sheetsChart": { object(SheetsChart) },
  // End of list of possible types for union field element_kind.
}

網頁元素有幾種,如上述定義中的聯集欄位 element_kind 所定義。下表說明這些網頁元素:

元素 kind 說明
群組 一組視為個別單元的網頁元素。可以一起移動、縮放及旋轉。
圖案 簡單的視覺物件,例如矩形、橢圓形和文字方塊。形狀可以包含文字,因此是建立投影片時最常用的網頁元素。
圖片 匯入 Google 簡報的圖片。
影片 匯入 Google 簡報的影片。
Line 視覺線條、曲線或連接器。
資料表 內容格狀檢視畫面。
WordArt 行為更像形狀的視覺文字元素。
SheetsChart 從 Google 試算表匯入 Google 簡報的圖表。

頁面和網頁元素屬性

Slides API 可讓您讀取及更新簡報中頁面和頁面元素的外觀。不同的網頁元素支援不同的屬性,可控制網頁元素的顯示方式。

每個網頁元素類型都有對應的屬性元素和屬性更新訊息,例如:

每個網頁元素類型都有相同的元素/屬性/更新要求組合:Image/imageProperties/UpdateImageProperties 等。

讀取元素時,只要遇到屬性,就可以讀取屬性;如要變更屬性中的值,請搭配相符的要求類型,做為 batchUpdate 方法的酬載,以便在簡報中變更這些值。

屬性種類

Slides API 中有幾種物件共用一些屬性:

屬性 說明
顏色 Slides API 中的顏色可以是 RGB 值,也可以是主題顏色的參照。主題顏色會以名稱 (例如「DARK1」) 參照,並可使用頁面的色彩配置對應至 RGB 值。在 Google 簡報編輯器中變更簡報主題時,通常會更新這項色彩配置。
填滿 填滿代表物件內部空白空間的算繪。Google 簡報最常支援的填滿方式是單色填滿,也就是在物件內部填滿單一顏色。填滿效果也可用於頁面背景。
外框 外框代表圍繞網頁元素的一組線條。線條顏色由填滿控制。來電者也可以調整外框的寬度和虛線樣式。
陰影 陰影代表視覺效果,用於模擬物件投射的實體陰影。目前 Slides API 中的陰影為唯讀。

正在更新屬性

如要更新屬性,請在 batchUpdate 呼叫中使用適當的 Update...Properties 要求,例如形狀的 UpdateShapeProperties。這些要求接受完整的屬性訊息,並可使用欄位遮罩,決定應更新屬性訊息中的哪些欄位。

資源繼承

頁面或網頁元素可以沿用父項物件的屬性。物件的屬性 (包括定義和繼承的屬性) 會決定最終的視覺外觀。

  • 頁面屬性:頁面會沿用未定義的任何屬性,但這些屬性是在頁面所依據的版面配置或主版中定義。
  • 形狀屬性:形狀可以標示為預留位置,讓您明確參照另一個預留位置形狀 (位於頁面的上層版面配置或主版),並從中沿用屬性。

以下各段將進一步說明這些概念。

沿用頁面屬性

投影片、版面配置和母片的結構定義了簡報中的繼承階層:投影片繼承自版面配置,版面配置繼承自母片。投影片的上層布局和主投影片是在投影片的 slideProperties 欄位中指定。

頁面可以從父項頁面繼承屬性,例如背景和色彩配置。如要沿用屬性,子頁面只要不在其 PageProperties 訊息中設定該屬性的值即可。如果不「覆寫」父項定義的值,網頁就會接受沿用的值。

下圖顯示投影片繼承版面配置的屬性,而版面配置則繼承主投影片的屬性:

投影片屬性沿用

用於算繪投影片的屬性,是投影片定義的屬性和繼承的屬性組合。在這個範例中,用於算繪投影片 1 的解析值如下:

  • PropertyA 為「Red」。
  • PropertyB 為「Orange」。

形狀屬性的繼承

形狀可以沿用其他形狀的屬性,例如填滿、外框或陰影。如果圖形的 Shape.placeholder 欄位已設定,則該圖形為預留位置。子預留位置的 Shape.placeholder.parentObjectId 欄位會識別其父預留位置。根據版面配置建立新投影片時,該版面配置中的任何預留位置都會在新投影片中顯示為子項形狀。同樣地,主頁上的預留位置可以做為版面配置預留位置的父項。

定義這個繼承階層後,子頁面只要不在其 ShapeProperties 訊息中設定該值,就會繼承屬性。如果不覆寫父項定義的值,子項形狀就會接受沿用的值。

下圖顯示投影片、版面配置和主版中包含的三個預留位置之間的屬性繼承關係:

形狀屬性繼承

用於算繪預留位置形狀的屬性,是其定義和繼承屬性的組合。在這個範例中,這些形狀的解析值如下:

  • Placeholder1:propertyA 顯示為「黃色」,propertyB 顯示為「綠色」。
  • Placeholder2:propertyA 顯示為「Yellow」,propertyB 顯示為「Purple」。
  • Placeholder3:propertyA 顯示為「黃色」,propertyB 顯示為「紫色」。

只有形狀這種網頁元素可以有上層元素。其他類型 (例如圖片、表格和圖表) 無法做為預留位置,也不能有父項。

使用 PropertyState「隱藏」屬性

PropertyState 列舉可控制形狀的屬性是否實際用於算繪,或該值是否僅用於子項形狀繼承。在頁面上算繪形狀時,不會使用屬性狀態為 NOT_RENDERED 的屬性,但具有對應屬性狀態 RENDERED 的子項仍可沿用此屬性。

下圖顯示三個預留位置之間的屬性繼承關係,這些預留位置會操控 PropertyState 欄位:

屬性狀態和繼承

PropertyState 欄位可能會影響形狀屬性的算繪。在這個範例中,這些形狀的解析值如下:

  • Placeholder1:propertyA 顯示為「Red」。
  • Placeholder2:未算繪 propertyA。如果這是外框屬性,Placeholder2 就不會有外框。
  • Placeholder3:未算繪 propertyA。

PropertyState 列舉還有一個可能的值:INHERIT 屬性狀態表示屬性狀態本身是繼承而來,應使用父項的值。沒有父項的形狀不能有 INHERIT 屬性狀態。