変換とページ要素

このガイドでは、ページ要素の変換(移動、回転、スケーリング、せん断)に使用される基本的なコンセプトについて、特に基本的なアフィン変換とその操作を中心に説明します。

アフィン変換を使用して特定の結果を得る方法については、シェイプのサイズと位置のガイドをご覧ください。

ページ要素の視覚的なサイズと位置は、sizetransform という 2 つのプロパティによって制御されます。サイズは、作成するページ要素の理想的なサイズまたは組み込みのサイズを表します。この変換では、2 次元のアフィン変換行列を指定し、組み込みサイズのオブジェクトを最終的な外観に変換する方法を指定します。

アフィン変換によってレンダリングされたシェイプの図

スライドの UI でページ要素を選択し、調整ハンドルを使用してその表示サイズを変更すると、実際にはこの変換マトリックスが更新されます。要素をページ上で移動したり回転させたりすると、要素の変換行列も更新されます。

スライド UI の使用を開始する

ページ要素の変換とサイズ変更に使用する行列計算は非常に強力なものですが、一見面倒な作業になりかねません。このページでは、これらの計算方法について説明しています。ただし、次のアプローチを使用して変換とサイズの仕様を簡素化できます。

  1. スライド UI を使用してページ要素を作成する。
  2. 引き続きスライド UI を使用して、これらのページ要素を必要に応じて配置調整する。
  3. get メソッドを使用して、これらの要素のサイズと変換を読み取ります。

初めて使用する場合はこれで十分です。このガイドの残りの部分では、ページ要素を操作するために使用できる変換計算について詳しく説明します。

アフィン変換行列

2 次元アフィン変換行列は、グラフィック ライブラリで要素のスケーリング、回転、せん断、反射、変換を制御するためによく使用されます。Slide API では、ページ要素の変換は 3x3 行列として表されます。

$$A=\begin{bmatrix} scale\_x & shear\_x & translate\_x\\ shear\_y & scale\_y & translate\_y\\ 0 & 0 & 1 \end{bmatrix}$$

変換で使用されるパラメータは次のとおりです。

translate_x Translation パラメータは、ページの左上隅を基準として、ページ要素の左上隅の(X、Y)位置を指定します。相対位置は、ポイント(pt)または英語(EMU)の単位を使用して指定します。
translate_y
scale_x スケール パラメータは、レンダリング時のページ要素の大きさを制御します。これらは単位なしの乗算係数です。たとえば、scale_x の値が 1.5 の場合、要素の幅は 50% 拡大されます。
scale_y
shear_x 「ずり」パラメータも単位がなく、ページ要素の傾斜を制御します。ページ要素を回転させるために、Scale パラメータと Shear パラメータを組み合わせて使用できます。
shear_y

2D 変換行列がグラフィカル オブジェクトのレンダリングにどのように影響するかを示す例は、ウェブ上に多数掲載されています。

変換行列は、要素の包含グループまたはページを基準にします。たとえば、長方形を含むグループを回転した場合、グループの transform フィールドの値は回転を反映しますが、長方形の transform フィールドの値は回転しません。

表示サイズの計算

ページ要素の視覚的な(レンダリングされた)サイズを決定するには、サイズプロパティと変換プロパティの両方を考慮する必要があります。サイズ プロパティを比較するだけでは、2 つのページ要素のうちどれが視覚的に大きいかを判断できません。変換行列を使用して要素の境界をマッピングし、レンダリング サイズを計算する必要があります。

拡張ポイントのマッピング

変換行列を使用して特定の点をマッピングするには、点 (x, y) をベクトル [x, y, 1] に変換してから、行列乗算を行います。点 p のマッピングについて考えてみましょう。

\[p' = Ap\]

この場合は次のようになります。

$$\begin{bmatrix} x'\\ y'\\ 1 \end{bmatrix} =\begin{bmatrix} scale\_x & shear\_x & translate\_x\\ shear\_y & scale\_y & translate\_y\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix}$$

したがって、新しい点 p' の座標は次のようになります。

$$x' = (scale\_x \times x) + (shear\_x \times y) + translate\_x\\ y' = (scale\_y \times y) + (shear\_y \times x) + translate\_y$$

境界の計算

せん断とスケーリングによる変換後に要素の境界ボックスのレンダリング サイズを決定するには、次のコマンドを使用します。

$$width' = (scale\_x \times width) + (shear\_x \times height)\\ height' = (scale\_y \times height) + (shear\_y \times width)$$

アフィン変換を使用して特定の結果を得る方法については、シェイプのサイズと位置のガイドをご覧ください。

制限事項

サイズ設定と配置のフィールドの中には、一部のタイプのページ要素と互換性がないものがあります。以下の表は、特定のページ要素と、サイズ設定と配置のフィールドの互換性をまとめたものです。

項目 動画 テーブル
翻訳
選択肢 ×**
シア × ×

** 表の行と列のディメンションを更新するには、UpdateTableRowPropertiesRequestUpdateTableColumnPropertiesRequest を使用します。

ページ要素にせん断がある場合、すべてのサイズ設定と配置フィールドで予期しない結果が生じる可能性があります。すべての制限は変更される可能性があります。最新の情報については GoogleSlide API をご覧ください。