Размер и расположение элементов страницы

Существует два разных способа получить и изменить размер и положение элемента страницы:

  1. Использование функций получения и установки размера и положения.
  2. Манипулирование аффинным преобразованием с помощью функций getTransform() и setTransform() с сохранением присущего размеру объекта.

Прочитать свойства элемента страницы

Размеры и вращение

Как показано на рисунке, размер и положение измеряются относительно ограничивающего прямоугольника отображаемого элемента страницы, когда он не имеет поворота:

  • Левая и верхняя границы : измеряются от верхнего левого угла страницы до верхнего левого угла не повернутого ограничивающего прямоугольника. Используйте getLeft() и getTop() для чтения значений.
  • Ширина и высота : ширина и высота не повернутого ограничивающего прямоугольника. Используйте getWidth() и getHeight() для чтения этих значений.
  • Вращение : вращение по часовой стрелке относительно вертикальной линии вокруг центра ограничивающего прямоугольника. Используйте getRotation() для чтения значения.

Все длины измеряются в пунктах (пт). Угол поворота измеряется в градусах (°).

Задать свойства элемента страницы

Задайте размер и положение элемента страницы при его создании с помощью метода вставки, например, 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() чтобы задать вращение ограничивающего прямоугольника по часовой стрелке вокруг его центра.

Следующий скрипт создает фигуру на первом слайде активной презентации, использует методы-сеттеры для обновления ее положения, размера и поворота, а также считывает информацию о положении и размере фигуры.

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°.

Параметры размера, положения и поворота можно использовать в любом порядке или комбинации. Замена третьей строки в предыдущем скрипте на следующий скрипт даст тот же результат:

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 предоставляет интерфейс, аналогичный API Google Slides, для использования аффинных преобразований.

  • Для чтения свойств можно использовать аффинное преобразование, которое описывает, как элемент масштабируется, поворачивается, сдвигается и позиционируется. Чтобы узнать, как использовать преобразование элемента и его собственный (исходный) размер для расчета его визуального размера на слайде, см. раздел «Преобразования» . В 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°.