頁面元素大小和位置

您可以透過兩種方式取得及變更頁面元素的大小和位置:

  1. 使用 getter 和 setter 函式進行大小和位置。
  2. 運用 getTransform()setTransform() 函式操控仿冒轉換,同時保留固有大小。

讀取網頁元素屬性

調整大小和旋轉

如圖所示,算繪網頁元素的定界框沒有旋轉時,會視其大小和位置進行測量:

  • LeftTop:從頁面左上角到未旋轉定界框的左上角。使用 getLeft()getTop() 讀取值。
  • 「Width」和「Height」:未旋轉的定界框的寬度和高度。使用 getWidth()getHeight() 讀取值。
  • 旋轉:與定界框中央周圍的垂直線順時針旋轉。使用 getRotation() 讀取值。

所有長度都以點 (pt) 為單位。旋轉是以度數 (°) 為單位。

設定網頁元素屬性

使用 insertShape() 等插入方法建立頁面元素時,可以設定頁面元素的大小和位置。針對現有形狀,您可以設定大小、位置和旋轉;也可以設定元素的縮放比例,藉此調整大小或沿著元素邊緣反映該形狀。

建立時

您可以在建立頁面元素時提供位置和大小資訊。

var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 100, 200, 300, 60);
Logger.log('Left: ' + shape.getLeft() + 'pt; Top: '
                    + shape.getTop() + 'pt; Width: '
                    + shape.getWidth() + 'pt; Height: '
                    + shape.getHeight() + 'pt; Rotation: '
                    + shape.getRotation() + ' degrees.');

上述指令碼會在使用中簡報的第一張投影片上建立形狀並指定位置和大小,並讀取形狀的位置和大小資訊。預期的記錄為:

Left: 100pt; Top: 200pt; Width: 300pt; Height: 60pt; Rotation: 0 degrees.

大小、位置和旋轉

建立頁面元素後,您可以更新的大小和位置:

  • 使用 setLeft()setTop() 可設定未旋轉的定界框左上角的位置。
  • 使用 setWidth()setHeight() 設定定界框的轉譯寬度和高度。
  • 使用 setRotation() 可設定定界框在其中心周圍的順時針旋轉。

以下指令碼會在使用中簡報的第一張投影片上建立形狀、使用 setter 更新位置、大小和旋轉,以及讀取形狀的位置和大小資訊。

var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setLeft(100).setTop(200).setWidth(50).setHeight(60).setRotation(90);
Logger.log('Left: ' + shape.getLeft()
                    + 'pt; Top: ' + shape.getTop()
                    + 'pt; Width: ' + shape.getWidth()
                    + 'pt; Height: ' + shape.getHeight()
                    + 'pt; Rotation: ' + shape.getRotation() + '\u00B0.');

這個指令碼的預期記錄如下所示:

Left: 100pt; Top: 200pt; Width: 50pt; Height: 60pt; Rotation: 90°.

您可以使用任何順序或組合,使用大小、位置和旋轉 setter。以下列指令碼取代上面的第三行,會產生相同的結果:

shape.setWidth(55);
shape.setRotation(90).setHeight(60).setLeft(100);
shape.setWidth(50).setTop(200);

資源調度

與其使用上述的 setWidth()setHeight() 將形狀大小設為絕對值,您可以使用 scaleWidth()scaleHeight() 來延展或擠壓具有相對縮放比例的頁面元素。

shape.scaleHeight(0.5).scaleWidth(2);

下圖說明上述程式碼在 45° 旋轉的正方形形狀上的運作方式。請注意,縮放時,定界框的左上角是固定的。

投影片縮放

沿著邊緣反思

scaleWidth()scaleHeight() 中的引數可以是負數,因此可以用來水平或垂直翻轉網頁元素。

shape.scaleWidth(-1); // Flip horizontally along the left edge of the bounding box.
shape.scaleHeight(-1); // Flip vertically along the top edge of the bounding box.

下圖說明上述程式碼在 45° 旋轉的形狀上的運作方式。請注意,網頁元素會沿著其定界框的其中一個邊緣翻轉,但不在其中央。

投影片反思

線條旋轉

和其他頁面元素一樣,線條的旋轉角度不是線條的垂直角度,而是定界框的旋轉。當您建立線條並指定起點和終點時,其旋轉角度一律為 0°。在 Google 簡報 UI 中拖曳線條的端點,會變更其垂直角度、定界框的大小和位置,但不會改變其旋轉角度。使用 setRotation() 可旋轉線條的定界框,可有效變更垂直角度。因此,兩行的視覺垂直角度可能相同,但定界框也有所不同,因此大小、位置和旋轉值有所不同。

限制

部分大小和定位方法與某些類型的頁面元素不相容。下表摘要列出與特定類型的網頁元素不相容的方法。

方法 形狀 影片 資料表
getHeight(), getWidth() NO (傳回空值)
setHeight(), setWidth()
setRotation()
scaleHeight(), scaleWidth()

如果網頁元素經過遮蓋,所有大小和定位方法都可能會產生非預期的結果。所有限制隨時可能變動。如需最新資訊,請查看參考資料。

使用仿製轉換

如果是進階控制項,您也可以透過本身的 (原生) 大小和仿照轉換計算頁面元素的大小和位置。

Google Apps Script 提供的介面與 Google 簡報 API 類似,可用來進行仿製轉換。

  • 如要閱讀此文章,請參閱這篇文章說明興趣相似目標對象轉換的概念,以及如何從固有 (原生) 大小推論轉譯的轉譯大小,並轉換頁面元素。在 Apps Script 中使用
    • getInherentWidth()getInherentHeight() 用於頁面元素原生大小;
    • getTransform(),適用於頁面元素的仿射轉換。
  • 如要編寫程式碼,請參閱這篇文章,瞭解如何使用模擬轉換功能調整頁面元素的大小和位置,以達成縮放、旋轉、反射等目標。在 Apps Script 中使用
    • setTransform() 可設定頁面元素的仿製轉換模式 (類似 ABSOLUTE 模式);
    • preconcatenateTransform() 會預先串連轉換轉換到頁面元素目前的轉換模式 (類似 RELATIVE 模式)。

以下指令碼會建立形狀、設定轉換、讀取固有大小,並讀取其仿照轉換。

var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setTransform(SlidesApp.newAffineTransformBuilder()
                   .setScaleX(2)
                   .setScaleY(1)
                   .setTranslateX(100)
                   .setTranslateY(200)
                   .build());
Logger.log('Inherent width: ' + shape.getInherentWidth()
                              + 'pt; Inherent height: '
                              + shape.getInherentHeight() + 'pt.');

這個指令碼的預期記錄如下所示:

Inherent width: 236.2pt; Inherent height: 236.2pt.

產生的形狀會有下列轉換,以及呈現的大小和位置:

AffineTransform{scaleX=2.0, scaleY=1.0, shearX=0.0, shearY=0.0, translateX=100.0, translateY=200.0}
Left: 100pt; Top: 200pt; Width: 472.4pt; Height: 236.2pt; Rotation: 0°.