변환 및 페이지 요소

이 가이드에서는 페이지 요소를 변환 (예: 이동, 회전, 크기 조정, 변형)하는 데 사용되는 기본 개념을 설명하며 특히 기본 아핀 변환 및 그 작업에 중점을 둡니다.

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

페이지 요소의 시각적 크기와 위치는 size 및 transform이라는 두 가지 속성으로 제어됩니다. 크기는 생성 중인 페이지 요소의 이상적인 크기 또는 내장 크기를 나타냅니다. 변환은 내장 크기의 객체가 변환되어 최종 시각적 모양을 갖추는 방식을 지정하는 2차원 아핀 변환 매트릭스를 지정합니다.

아핀 변환을 통해 렌더링된 도형의 다이어그램

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

Slides UI를 사용하여 시작하기

페이지 요소를 변환하고 크기를 조절하는 데 사용하는 행렬 산술은 매우 강력하지만 처음에는 다소 어렵게 느껴질 수 있습니다. 이 페이지의 대부분은 이러한 계산을 설명합니다. 하지만 다음 접근 방식을 사용하여 변환 및 크기의 사양을 간소화할 수 있습니다.

  1. Slides UI를 사용하여 페이지 요소를 만듭니다.
  2. 프레젠테이션 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 translate 매개변수는 페이지 요소의 왼쪽 상단을 기준으로 페이지 요소의 왼쪽 상단의 (X,Y) 위치를 지정합니다. 점 (pt) 또는 영국식 측정 단위 (EMU)의 단위를 사용하여 상대 위치를 지정합니다.
translate_y
scale_x 크기 매개변수는 렌더링 시 페이지 요소의 크기를 제어합니다. 단위가 없는 곱셈 계수입니다. 예를 들어 scale_x 값이 1.5이면 요소의 너비가 50% 커집니다.
scale_y
shear_x 변형 매개변수도 단위가 없으며 페이지 요소의 기울기를 제어합니다. 크기 조정 및 변형 매개변수를 함께 사용하여 페이지 요소를 회전할 수 있습니다.
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)$$

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

제한사항

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

필드 도형 동영상 표
번역과 ✔ ✔ ✔
확장 ✔ ✔ 아니요**
Shear ✔ 아니요 아니요

** 테이블 행 및 열 크기를 업데이트하려면 UpdateTableRowPropertiesRequest 및 UpdateTableColumnPropertiesRequest를 사용하세요.

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