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 좌표를 계산해야 합니다.
첫 번째 요청은 화살표 도형의 왼쪽 테두리에 정렬되지만 화살표의 상단 가장자리 아래 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, 000 EMU,위쪽으로 35,000 EMU 이동합니다 (상대 변환 applyMode 사용). 사용되는 변환1 행렬은 요소의 크기와 방향을 변경하지 않도록 구성됩니다.
두 요청을 모두 실행한 후 화살표의 왼쪽 상단이 (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"
}
}
}
]
}