Google Slides API を使用すると、線分を直線に保ち、点と平行線を維持した状態で、ページ上の PageElement（テキスト ボックス、画像、表、基本的なシェイプ）の位置、サイズ、向きを制御できます。これらは「アフィン変換」と呼ばれます。次の例は、presentations.batchUpdate メソッドを使用した一般的なページ要素変換オペレーションを示しています。
サンプルで使用する変数は次のとおりです。
- PRESENTATION_ID - プレゼンテーション ID を指定する場所を示します。この ID の値はプレゼンテーションの URL で確認できます。
- PAGE_ID - ページ オブジェクト ID を指定する場所を示します。この ID の値は URL から、または API の読み取りリクエストを使用して取得できます。
- PAGE_ELEMENT_ID - ページ要素オブジェクト ID を指定する場所を示します。作成する要素の ID は自身で指定するか（いくつかの制限事項があります）、Slides API で自動的に生成できます。要素 ID は 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 メソッドを使用して、ページ上の矢印のシェイプのサンプルと位置をそろえた正しい位置に新しいシェイプを作成する方法を示しています。どちらの場合も、新しいシェイプの左上隅の X 座標と Y 座標を計算する必要があります。
最初のリクエストでは、矢印の形状の左枠線に沿って配置され、矢印の上端から 50 pt（50 × 12,700 = 635,000 EMU）に配置された 100 x 50 pt の長方形が作成されます。新しい長方形の X 座標を矢印の X 座標と同じ値に指定して、左側の境界線をそろえます。長方形の Y 座標は、矢印の Y 座標に 50 pt を加算した値に指定します（距離は矢印の上端を基準に測ります）。結果的に、この長方形の座標は次のようになります。
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
2 つ目のリクエストでは、サンプルの矢印のシェイプと水平方向の中心線を共有する幅 40 pt の円を作成して、その円を矢印の右端から 100 pt（1,270,000 EMU）だけ右にずらした位置に配置しています。円の X 座標は、矢印の X 座標、矢印の幅、100 pt の合計です。新しい円を中心線に対してアラインメントする際は、矢印と円の両方の高さを考慮する必要があります。円の Y 座標は、矢印の Y 座標に矢印の高さの半分を加算し、円の高さの半分を減算した値にします。上記のどちらのケースでも、矢印に関するスケール係数がレンダリング後の矢印の幅と高さに影響するため、この値も考慮に入れる必要があります。したがって、この円の座標は次のようになります。
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 つの異なる方法で移動する方法を示しています。
バッチの最初のリクエストでは、絶対座標を指定した移動
applyMode を使用して、矢印の座標を (X, Y) = (2000000, 150000) EMU に移動します。バッチの 2 つ目のリクエストでは、相対座標を指定した移動 applyMode を使用して、その位置から右方向に 40,000 EMU、上方向に 35,000 EMU だけ座標を移動します。使用される変換 1 行列は、要素のサイズと向きを維持するように構成されています。
これらのリクエストの実行後、矢印の左上隅の座標は (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 メソッドを使用して、矢印のシェイプのサンプル ページ要素を、ページ上での位置とスケーリングを保ちつつ、中心線を基準にして水平方向に鏡映する方法を示しています。
これは、要素の基準フレームで基本的な反射変換を使用して行われます。ここでは理解しやすいように、座標変換と鏡映を UpdatePageElementTransformRequest メソッドを 3 回呼び出して示していますが、実際にはこれらの変換行列をあらかじめ乗算しておき、その積を 1 回のリクエストで適用する方が効率的です。
変換変換では、矢印のシェイプの中心が原点との間で移動されます。パラメータの値は、わかりやすいように計算式として記載しています。
要素を反映するリクエスト プロトコルは次のとおりです。
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% のみに拡大縮小します。なお、矢印の中心は同じ位置を維持し、向きは維持します。
これは、要素の基準フレームで基本スケーリング変換を使用して行われます。ここではわかりやすくするために、座標変換とスケーリングを UpdatePageElementTransformRequest メソッドを 3 回呼び出して示していますが、実際にはこれらの変換行列をあらかじめ乗算しておき、その積を 1 回のリクエストで適用する方が効率的です。
変換変換では、矢印のシェイプの中心が原点との間で移動されます。パラメータの値は、わかりやすいように計算式として記載しています。
要素のサイズを変更するリクエスト プロトコルは次のとおりです。
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 度回転する方法を示しています。
この操作を実行するために、要素の基準座標系で基本的な回転変換を行います。わかりやすくするため、参照フレームのシフトと回転は UpdatePageElementTransformRequest メソッドを 3 回呼び出すことで示されていますが、これらの変換行列の積を事前に計算しておき、その積を 1 つのリクエストとして適用する方が効率的です。
移動変換では、矢印のシェイプの中心を原点に移動し、後で原点から元の位置に戻します。パラメータ値は、わかりやすくするために計算として表されています。
要素を中心点の周りで回転させるリクエスト プロトコルは次のとおりです。
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"
}
}
}
]
}