Google Slides API를 사용하면 페이지에서 PageElement(텍스트 상자, 이미지, 표, 기본 도형)의 위치, 크기, 방향을 조작하면서 선을 똑바로 유지하고 점과 평행선을 유지할 수 있습니다. 이를 아핀 변환이라고 합니다. 여기의 예는 presentations.batchUpdate 메서드를 사용한 몇 가지 일반적인 페이지 요소 변환 작업을 보여줍니다.
이 예에서는 다음 변수를 사용합니다.
- PRESENTATION_ID: 프레젠테이션 ID를 입력하는 위치를 나타냅니다. 프레젠테이션 URL에서 이 ID 값을 확인할 수 있습니다.
- 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는 오른쪽으로 변환하고 35,000 EMU를 사용하여 상위로 변환하고(원 변환을 사용하여 요소의 방향을 변환합니다(사용된 방향 평행 변환).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 메서드를 별도로 세 번 호출하여 표시되지만, 이러한 변환 행렬의 곱을 미리 계산하여 해당 곱을 단일 요청으로 적용하는 것이 더 효율적입니다.
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"
}
}
}
]
}