페이지 요소의 크기와 위치를 가져오고 변경하는 방법에는 두 가지가 있습니다.
- 크기와 위치에 getter 및 setter 함수 사용
- 고유 크기를 유지하면서
getTransform()및setTransform()함수를 사용하여 어파인 변환 조작
페이지 요소 속성 읽기
그림과 같이 회전이 없는 경우 렌더링된 페이지 요소의 경계 상자를 기준으로 크기와 위치가 측정됩니다.
- 왼쪽 및 상단: 페이지의 왼쪽 상단에서
회전되지 않은 경계 상자의 왼쪽 상단까지 측정됩니다.
getLeft()및getTop()을 사용하여 값을 읽습니다. - 너비 및 높이: 회전되지 않은 경계 상자의 너비와 높이입니다.
getWidth()및getHeight()를 사용하여 값을 읽습니다. - 회전: 경계 상자의 중심을 기준으로 세로선을 따라 시계 방향으로 회전합니다.
getRotation()을 사용하여 값을 읽습니다.
모든 길이는 포인트 (pt)로 측정됩니다. 회전은 각도(°)로 측정됩니다.
페이지 요소 속성 설정
insertShape()와 같은 삽입 메서드를 사용하여 페이지 요소를 만들 때 크기와 위치를 설정합니다. 기존 도형의 경우 크기, 위치, 회전을 설정할 수 있습니다. 또한 요소의 배율을 설정하여 크기를 조절하거나 가장자리를 따라 반영할 수 있습니다.
생성 시
페이지 요소를 만들 때 위치 및 크기 정보를 제공합니다.
var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 100, 200, 300, 60);
Logger.log('Left: ' + shape.getLeft() + 'pt; Top: '
+ shape.getTop() + 'pt; Width: '
+ shape.getWidth() + 'pt; Height: '
+ shape.getHeight() + 'pt; Rotation: '
+ shape.getRotation() + ' degrees.');
이전 스크립트는 지정된 위치와 크기로 활성 프레젠테이션의 첫 번째 슬라이드에 도형을 만들고 도형의 위치와 크기 정보를 읽습니다. 예상되는 로그는 다음과 같습니다.
Left: 100pt; Top: 200pt; Width: 300pt; Height: 60pt; Rotation: 0 degrees.
크기, 위치, 회전
생성 후 페이지 요소의 크기와 위치를 업데이트합니다.
setLeft()및setTop()을 사용하여 회전되지 않은 경계 상자의 왼쪽 상단 모서리 위치를 설정합니다.setWidth()및setHeight()를 사용하여 경계 상자의 렌더링된 너비와 높이를 설정합니다.setRotation()을 사용하여 경계 상자의 중심을 기준으로 시계 방향으로 회전을 설정합니다.
다음 스크립트는 활성 프레젠테이션의 첫 번째 슬라이드에 도형을 만들고, setter를 사용하여 위치, 크기, 회전을 업데이트하고, 도형의 위치와 크기 정보를 읽습니다.
var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setLeft(100).setTop(200).setWidth(50).setHeight(60).setRotation(90);
Logger.log('Left: ' + shape.getLeft()
+ 'pt; Top: ' + shape.getTop()
+ 'pt; Width: ' + shape.getWidth()
+ 'pt; Height: ' + shape.getHeight()
+ 'pt; Rotation: ' + shape.getRotation() + '\u00B0.');
예상되는 로그는 다음과 같습니다.
Left: 100pt; Top: 200pt; Width: 50pt; Height: 60pt; Rotation: 90°.
크기, 위치, 회전 setter는 순서나 조합에 관계없이 사용할 수 있습니다. 이전 스크립트의 세 번째 줄을 다음 스크립트로 바꾸면 동일한 결과가 생성됩니다.
shape.setWidth(55);
shape.setRotation(90).setHeight(60).setLeft(100);
shape.setWidth(50).setTop(200);
페이지 요소 크기 조절
setWidth() 및 setHeight()를 사용하여 도형의 크기를 절대값으로 설정하는 대신 scaleWidth() 및 scaleHeight()를 사용하여 상대적 배율 인수로 페이지 요소를 늘리거나 줄일 수 있습니다.
shape.scaleHeight(0.5).scaleWidth(2);
다음 그림은 이전 코드가 45° 회전된 정사각형 도형에서 작동하는 방식을 보여줍니다. 배율 조정 중에 경계 상자의 왼쪽 상단 모서리가 고정됩니다.
페이지 요소 반영
scaleWidth() 및 scaleHeight()의 인수는 음수일 수 있으므로 페이지 요소를 가로 또는 세로로 뒤집는 데 사용할 수 있습니다.
// Flip horizontally along the left edge of the bounding box.
shape.scaleWidth(-1);
// Flip vertically along the top edge of the bounding box.
shape.scaleHeight(-1);
다음 그림은 이전 코드가 45° 회전된 도형에서 작동하는 방식을 보여줍니다. 페이지 요소는 경계 상자의 가장자리 중 하나를 따라 뒤집히지만 중심은 뒤집히지 않습니다.
선 회전
다른 페이지 요소와 마찬가지로 선의 회전은 선의 세로 각도가 아니라 경계 상자의 회전입니다. 지정된 시작점과 끝점으로 선을 만들면 회전은 항상 0°입니다. Slides UI에서 선의 끝점을 드래그하면 세로 각도와 경계 상자의 크기 및 위치가 변경되지만 회전은 변경되지 않습니다. setRotation()을 사용하면 선의 경계 상자가 회전되어 세로 각도가 효과적으로 변경됩니다. 따라서 두 선은 시각적 세로 각도는 동일하지만 경계 상자가 다르므로 크기, 위치, 회전 값이 다를 수 있습니다.
제한사항
일부 크기 조절 및 위치 지정 메서드는 일부 유형의 페이지 요소와 호환되지 않습니다. 다음 표에는 특정 유형의 페이지 요소와 호환되지 않는 메서드가 요약되어 있습니다.
| 메서드 | 도형 | 동영상 | 표 |
|---|---|---|---|
| getHeight(), getWidth() | ✔ | ✔ | 아니요 (null 반환) |
| setHeight(), setWidth() | ✔ | ✔ | 아니요 |
| setRotation() | ✔ | 아니요 | 아니요 |
| scaleHeight(), scaleWidth() | ✔ | ✔ | 아니요 |
페이지 요소에 전단이 있는 경우 모든 크기 조절 및 위치 지정 메서드가 예기치 않은 결과를 제공할 수 있습니다. 모든 제한사항은 변경될 수 있습니다. 최신 정보는 참조를 확인하세요.
어파인 변환 사용
고급 제어를 위해 페이지 요소의 크기와 위치는 고유 (기본) 크기 및 어파인 변환 을 통해 계산하고 조정할 수도 있습니다.
Google Apps Script는 어파인 변환을 사용하는 Google Slides API와 유사한 인터페이스를 제공합니다.
- 속성을 읽으려면 요소의 배율, 회전, 전단, 위치를 설명하는 어파인 변환을 사용할 수 있습니다. 요소의 변환 및 고유 (기본) 크기를 사용하여 슬라이드에서 시각적 크기를 계산하는 방법을 알아보려면
변환을 참고하세요. Apps Script에서는 다음을 사용합니다.
- 페이지 요소의 고유 (기본) 크기에
getInherentWidth()및getInherentHeight() - 페이지 요소의 어파인 변환에
getTransform()
- 페이지 요소의 고유 (기본) 크기에
- 속성을 변경하려면 어파인 변환을 사용하여 배율 조정, 회전, 반영 등을 실행할 수 있습니다. 어파인 변환을 사용하여 페이지 요소를 크기 조절하고 위치를 지정하는 방법을 알아보려면 크기 조절 및 위치 지정을 참고하세요.
Apps Script에서는 다음을 사용합니다.
- 페이지 요소의 어파인 변환을 설정하는
setTransform()(ABSOLUTE 모드와 유사) - 어파인 변환을 페이지 요소의 현재 변환에 미리 연결하는
preconcatenateTransform()(RELATIVE 모드와 유사)
- 페이지 요소의 어파인 변환을 설정하는
다음 스크립트는 도형을 만들고, 변환을 설정하고, 고유 크기를 읽고, 어파인 변환을 읽습니다.
var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setTransform(SlidesApp.newAffineTransformBuilder()
.setScaleX(2)
.setScaleY(1)
.setTranslateX(100)
.setTranslateY(200)
.build());
Logger.log('Inherent width: ' + shape.getInherentWidth()
+ 'pt; Inherent height: '
+ shape.getInherentHeight() + 'pt.');
예상되는 로그 출력은 다음과 같습니다.
Inherent width: 236.2pt; Inherent height: 236.2pt.
결과 도형에는 다음과 같은 변환, 렌더링된 크기, 위치가 있습니다.
AffineTransform{scaleX=2.0, scaleY=1.0, shearX=0.0, shearY=0.0, translateX=100.0, translateY=200.0}
Left: 100pt; Top: 200pt; Width: 472.4pt; Height: 236.2pt; Rotation: 0°.