取得及變更 網頁元素:
- 使用其 getter 和 setter 函式作為大小和位置。
- 使用
getTransform()
和setTransform()
函式操控仿生轉換,同時保留固有的大小。
讀取網頁元素屬性
如圖所示,系統會根據 轉譯網頁元素未經旋轉時的邊框:
- 左側和頂端:從頁面左上角到
未旋轉定界框的左上角。使用
getLeft()
和getTop()
: 讀取值 - 寬度和高度:未旋轉定界框的寬度和高度。
使用
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°.
您可以使用任何順序或組合,使用大小、位置和旋轉設定器。 使用下列指令碼取代上方的第三行會產生相同的結果:
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() | ✔ | ✔ | 否 |
如果網頁採用任何大小調整和定位方法,可能會導致非預期的結果 元素具有鋸齒狀。所有限制都可能會變動。檢查以下項目的參考資料: 最新資訊
使用 affine 轉換
如要使用進階控制項,網頁元素的大小和位置也可以 並透過固有 (原生) 大小和 affine 轉換功能進行計算和調整。
Google Apps Script 提供與 Google Slides API 一樣使用 affine 轉換的介面。
- 為了閱讀
請參閱這篇文章。
仿生轉換的概念,以及如何從固有地推斷轉譯大小
(原生) 大小和轉換頁面元素。在 Apps Script 中,請使用
- 適用於網頁原生大小的
getInherentWidth()
和getInherentHeight()
元素; getTransform()
用於頁面元素的 affine 轉換。
- 適用於網頁原生大小的
- 為了寫作
這篇文章說明
如何使用 affine 轉換工具調整頁面元素的大小和位置
縮放、旋轉、倒影等
setTransform()
:可設定頁面元素的 affine 轉換 (類似 ABSOLUTE 模式);preconcatenateTransform()
來預先串連咖啡因轉換為 頁面元素目前的轉換 (類似 RELATIVE 模式)。
下列指令碼會建立形狀、設定轉換、讀取固有大小。 並讀取其 affine 轉換
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°.