Google Slides API를 사용하면 페이지에서 PageElement(텍스트 상자, 이미지, 표, 기본 도형)의 위치, 크기, 방향을 조작하면서 선을 똑바로 유지하고 점과 평행선을 유지할 수 있습니다. 이를 아핀 변환이라고 합니다. 다음 예시에서는 presentations.batchUpdate 메서드를 사용한 일반적인 페이지 요소 변환 작업을 보여줍니다.
이 예에서는 다음 변수를 사용합니다.
- PRESENTATION_ID - 프레젠테이션 ID를 제공하는 위치를 나타냅니다. 이 ID의 값은 프레젠테이션 URL에서 찾을 수 있습니다.
- PAGE_ID: 페이지 객체 ID를 제공하는 위치를 나타냅니다. 이 값은 URL에서 가져오거나 API 읽기 요청을 사용하여 가져올 수 있습니다.
- PAGE_ELEMENT_ID - 페이지 요소 객체 ID를 제공하는 위치를 나타냅니다. 생성하는 요소에 이 ID를 지정하거나 (일부 제한사항 적용) Slides API에서 자동으로 ID를 생성하도록 허용할 수 있습니다. 요소 ID는 API 읽기 요청을 통해 검색할 수 있습니다.
이 예는 언어 중립을 위해 HTTP 요청으로 제공됩니다. Google API 클라이언트 라이브러리를 사용하여 다양한 언어로 일괄 업데이트를 구현하는 방법은 도형 및 텍스트 추가를 참고하세요.
화살표 도형 예
아래 예에서는 다음과 같은 크기 및 변환 데이터를 가진 (presentations.pages.get 메서드 요청으로 찾을 수 있음) 화살표 도형 페이지 요소의 예가 있다고 가정합니다. 도형 예는 측정값 unit EMU (영어 미터법 단위)와 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 좌표를 계산해야 합니다.
첫 번째 요청은 화살표 도형의 왼쪽 테두리에 정렬되지만 화살표의 상단 가장자리 아래 50pt (50 * 12,700 = 635,000 EMU)에 배치되는 100x50pt 직사각형을 만듭니다. 새 직사각형의 X 좌표는 왼쪽 테두리의 정렬 상태를 유지하기 위해 화살표의 X 좌표와 동일해야 합니다. 거리는 화살표 상단부터 측정되므로 Y 좌표는 화살표의 Y 좌표에 50pt를 더한 값과 동일합니다. 따라서 직사각형의 좌표는 다음과 같습니다.
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
두 번째 요청은 예시 화살표와 동일한 가로 중심선이 있지만 화살표의 오른쪽 가장자리 오른쪽 100포인트 (1,270,000EMU)에 배치된 40포인트 너비의 원을 만듭니다. 원의 X 좌표는 화살표의 X 좌표, 화살표 너비, 100포인트를 합한 값입니다. 새 원의 중심선 정렬을 적용하려면 화살표와 원의 높이를 모두 고려해야 합니다. 원의 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 메서드를 사용하여 예시 화살표 도형 페이지 요소를 두 가지 방법으로 변환하는 방법을 보여줍니다.
배치의 첫 번째 요청은 화살표를 (X,Y) = (2000000, 150000) EMU 좌표로 이동합니다(절대 변환
applyMode 사용). 배치의 두 번째 요청은 화살표를 그곳에서 오른쪽으로 이동합니다. 이번에는 40,000 EMU가 오른쪽으로 이동하며, 이번에는 35,000 EMU가 위로 이동되고, 상대적 변환1 크기를 사용하여 방향 변환1의 applyMode를 사용합니다.1 applyMode
두 요청을 모두 실행한 후 화살표의 왼쪽 상단 모서리는 (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 메서드 세 개의 개별 호출로 표시되지만, 이러한 변환 행렬의 곱을 미리 계산한 다음 이 곱을 단일 요청으로 적용하는 것이 더 효율적입니다.
변환 변환의 경우 화살표 도형의 중심이 원점 안팎으로 이동합니다. 매개변수 값은 명확성을 위해 계산으로 표시됩니다.
다음은 요소를 반영하는 요청 프로토콜입니다.
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 메서드 호출 세 개로 표시되지만, 이러한 변환 행렬의 곱을 미리 계산한 다음 이 곱을 단일 요청으로 적용하는 것이 더 효율적입니다.
변환 변환의 경우 화살표 도형의 중심이 원점 안팎으로 이동합니다. 매개변수 값은 명확성을 위해 계산으로 표시됩니다.
다음은 요소의 크기를 조절하는 요청 프로토콜입니다.
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 메서드 호출로 표시되지만, 이러한 변환 행렬의 곱을 미리 계산한 다음 이 곱을 단일 요청으로 적용하는 것이 더 효율적입니다.
변환 변환의 경우 화살표 도형의 중심이 원점 안팎으로 이동합니다. 매개변수 값은 명확성을 위해 계산으로 표시됩니다.
다음은 요소를 중심을 기준으로 회전하는 요청 프로토콜입니다.
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"
}
}
}
]
}