変換オペレーション

Google スライド API を使用すると、ページ上の PageElement （テキストボックス、画像、表、基本図形）の位置、サイズ、向きを操作しながら、直線を維持し、点と平行線を保持できます。これらはアフィン変換と呼ばれます。ここでは、一般的なページ要素の変換オペレーションの例を示します。 presentations.batchUpdate メソッドを使用します。

これらの例では、次の変数を使用します。

PRESENTATION_ID：プレゼンテーション ID を指定する場所を示します。この ID の値は、プレゼンテーションの URL から確認できます。
PAGE_ID：ページオブジェクト IDを指定する場所を示します。この値は、URL から取得するか、API 読み取りリクエストを使用して取得できます。
PAGE_ELEMENT_ID：ページ要素オブジェクト ID を指定する場所を示します。この ID は、作成する要素に指定することも（制限あり）、スライド API に自動的に作成させることもできます。要素 ID は、API 読み取りリクエストで取得できます。

これらの例は、言語に依存しない HTTP リクエストとして示されています。Google API クライアントライブラリを使用してさまざまな言語でバッチアップデートを実装する方法については、図形とテキストを追加するをご覧ください。

矢印図形の例

以下の例では、次のサイズと変換データを持つ矢印図形のページ要素が存在することを前提としています（これは presentations.pages.get メソッドリクエストで確認できます）。図形の例では、測定単位として unit EMU（English Metric Unit）と 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 座標を計算する必要があります。

最初のリクエストでは、矢印図形の左端に揃えられた 100 x 50 pt の長方形を作成しますが、矢印の上端から 50 pt（50 * 12,700 = 635,000 EMU）下に配置されます。新しい長方形の 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 つの方法で変換する方法を示しています。

バッチの最初のリクエストでは、矢印を (X,Y) = (2000000, 150000) EMU 座標に移動します（絶対変換 applyModeを使用）。バッチの 2 番目のリクエストでは、矢印をそこから移動します。今回は 40,000 EMU 右に、35,000 EMU 上に移動します（相対変換 applyModeを使用）。使用されるtransformation1 行列は、要素のサイズと向きを変更しないように構築されています。

両方のリクエストを実行すると、矢印の左上隅は (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 つの個別の呼び出しで示されていますが、これらの変換行列の積を事前に計算し、その積を単一のリクエストとして適用する方が効率的です。

変換変換の場合、矢印図形の中心は原点との間で移動します。パラメータ値は、明確にするために記すと計算として表されます。

要素を反転するリクエストプロトコルは次のとおりです。

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 つの個別の呼び出しで示されていますが、これらの変換行列の積を事前に計算し、その積を単一のリクエストとして適用する方が効率的です。

変換変換の場合、矢印図形の中心は原点との間で移動します。パラメータ値は、明確にするために記すと計算として表されます。

要素のサイズを変更するリクエストプロトコルは次のとおりです。

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 つの個別の呼び出しで示されていますが、これらの変換行列の積を事前に計算し、その積を単一のリクエストとして適用する方が効率的です。

変換変換の場合、矢印図形の中心は原点との間で移動します。パラメータ値は、明確にするために記すと計算として表されます。

要素を中心を軸に回転させるリクエストプロトコルは次のとおりです。

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"
        }
      }
    }
  ]
}

変換オペレーション コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

矢印図形の例

要素を別の要素に揃える

要素を移動する

要素を反転する

要素のサイズを変更する

要素を中心を軸に回転させる

変換オペレーション