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