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 좌표를 계산해야 합니다.
첫 번째 요청은 화살표 도형의 왼쪽 테두리에 맞춰 정렬되지만 화살표의 위쪽 가장자리 아래 50포인트 (50 * 12,700 = 635,000 EMU)에 위치하는 100x50포인트 사각형을 만듭니다. 새 사각형의 X 좌표는 왼쪽 테두리가 정렬되도록 화살표의 X 좌표와 동일해야 합니다. 거리는 화살표의 꼭대기에서 측정되므로 Y 좌표는 화살표의 Y 좌표에 50포인트를 더한 것과 같습니다. 따라서 직사각형의 좌표는 다음과 같습니다.
x" = 2000000 EMU y" = 550000 + (50 * 12700) = 1185000 EMU
두 번째 요청은 예시 화살표와 동일한 가로 중심선을 갖지만, 화살표 오른쪽 가장자리의 오른쪽 100포인트 (1,270,000 EMU)에 위치하는 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"
}
}
}
]
}