변환과 페이지 요소

이 가이드에서는 페이지 요소를 변환(이동, 회전, 배율 조정 및 기울기)에 사용된 기본 개념에 대해 설명하며, 특히 기본적인 아핀 변환(affine transform) 및 그 작업을 중점적으로 설명합니다.

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

페이지 요소의 시각적인 크기 및 위치는 크기 속성 및 변환 속성으로 제어합니다. 크기는 생성 중인 페이지 요소의 이상적인 또는 기본 크기를 설명합니다. 변환은 기본 크기의 객체가 최종 시각적 모양의 결과로 변환되는 방법을 지정하는 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 translate(좌표이동) 매개 변수는 페이지의 왼쪽 위에 상대적인 페이지 요소의 왼쪽 위 (X,Y) 위치를 지정합니다. 상대 위치는 포인트(pt) 또는 영어 미터법 단위(EMU) 등 단위를 사용하여 지정할 수 있습니다.
translate_y
scale_x scale 매개변수는 렌더링할 때 적용되는 페이지 요소의 크기를 제어합니다. 이는 단위 없는 배율입니다. 예를 들어, scale_x 값 1.5는 요소의 너비를 50% 확대합니다.
scale_y
shear_x shear 매개변수도 단위가 없으며 페이지 요소의 기울기를 제어합니다. scale 매개변수와 shear 매개변수를 함께 사용하여 페이지 요소를 회전할 수 있습니다.
shear_y

웹에서 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)$$

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

다음에 대한 의견 보내기...

도움이 필요하시나요? 지원 페이지를 방문하세요.