변환 및 페이지 요소

이 가이드에서는 페이지 요소를 변환 (이동, 회전, 확장, 기울기)에 사용되는 기본 개념을 설명하며 특히 기본적인 아핀 변환과 그 작업을 중점적으로 설명합니다.

아핀 변환을 사용하여 특정 결과를 얻는 방법에 관한 자세한 내용은 도형 크기 및 위치 가이드를 참고하세요.

페이지 요소의 시각적 크기와 위치는 크기 및 변환이라는 두 가지 속성으로 제어됩니다. 크기는 생성 중인 페이지 요소의 이상적인 크기 또는 기본 제공 크기를 설명합니다. 변환은 기본 크기의 객체를 변환하여 최종 시각적 모양을 만드는 방법을 지정하는 2차원 아핀 변환 행렬을 지정합니다.

Slides UI에서 페이지 요소를 선택하고 조정 핸들을 사용하여 시각적 크기를 변경하면 실제로 이 변환 매트릭스가 업데이트됩니다. 요소를 페이지에서 이동하거나 회전하면 요소의 변환 행렬도 업데이트됩니다.

Slides UI를 사용하여 시작하기

페이지 요소를 변환하고 크기를 조절하는 데 사용하는 행렬 연산은 매우 강력하지만 처음에는 어려울 수 있습니다. 이 페이지에서는 대부분 이러한 계산에 대해 설명합니다. 그러나 다음 접근 방식을 사용하여 변환 및 크기 사양을 단순화할 수 있습니다.

1. Slides UI를 사용하여 페이지 요소를 만듭니다.
2. Slides UI를 사용하여 페이지 요소의 크기를 원하는 대로 조정합니다.
3. get 메서드를 사용하여 이러한 요소의 크기와 변환을 읽습니다.

이것으로 시작하는 데 충분할 수 있습니다. 이 가이드의 나머지 부분에서는 페이지 요소를 자세히 조작하는 데 사용할 수 있는 변환 계산을 설명합니다.

아핀 변환 행렬

2차원 아핀 변환 행렬은 일반적으로 그래픽 라이브러리에서 요소의 크기 조정, 회전, 기울기, 반사 및 변환을 제어하는 데 사용됩니다. Slides API에서 페이지 요소의 변환은 3x3 행렬로 표현됩니다.

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

변환에 사용되는 매개변수는 다음과 같습니다.

translate_x	변환 매개변수는 페이지 왼쪽 상단을 기준으로 페이지 요소의 왼쪽 상단 모서리의 (X,Y) 위치를 지정합니다. 포인트 (pt)나 영국 미터법 단위 (EMU)의 단위를 사용하여 상대 위치를 지정합니다.
translate_y
scale_x	배율 매개변수는 렌더링 시 페이지 요소의 크기를 제어합니다. 단위 없는 배율입니다. 예를 들어 scale_x 값이 1.5이면 요소의 너비가 50% 확대됩니다.
scale_y
shear_x	shear 매개변수도 단위가 없으며 페이지 요소의 기울기를 제어합니다. 배율 및 기울기 매개변수를 함께 사용하여 페이지 요소를 회전할 수 있습니다.
shear_y

2D 변환 행렬이 그래픽 객체 렌더링에 미치는 영향을 보여주는 웹 사례를 많이 찾아볼 수 있습니다.

변환 행렬은 요소의 포함 그룹 또는 페이지에 상대적입니다. 예를 들어 직사각형이 포함된 그룹을 회전하면 그룹의 transform 필드 값에는 회전이 반영되지만 직사각형의 transform 필드 값은 그렇지 않습니다.

시각적 크기 계산 중

페이지 요소의 시각적 (렌더링된) 크기를 결정하려면 크기 및 변환 속성을 모두 고려해야 합니다. 크기 속성을 비교하는 것만으로는 두 페이지 요소 중 어느 요소가 시각적으로 더 큰지 확인할 수 없습니다. 변환 행렬을 사용하여 요소의 경계를 매핑하고 렌더링된 크기를 계산해야 합니다.

지점 매핑

변환 행렬을 사용하여 특정 점을 매핑하려면 점 (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)$$

아핀 변환을 사용하여 특정 결과를 얻는 방법에 관한 자세한 내용은 도형 크기 및 위치 가이드를 참고하세요.

제한사항

일부 크기 및 위치 지정 필드는 일부 페이지 요소 유형과 호환되지 않습니다. 아래 표에는 특정 페이지 요소와 크기 및 위치 필드의 호환성이 요약되어 있습니다.

필드	모양	동영상	테이블
번역과	✔	✔	✔
점수	✔	✔	아니요**
기울기	✔	No	No

** 표의 행 및 열 측정기준을 업데이트하려면 UpdateTableRowPropertiesRequest 및 UpdateTableColumnPropertiesRequest를 사용합니다.

페이지 요소에 기울기가 있는 경우 모든 크기 및 위치 필드에 예기치 않은 결과가 발생할 수 있습니다. 모든 제한사항은 변경될 수 있습니다. 최신 정보는 Google Slides API를 참고하세요.