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

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

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

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

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

shape.scaleWidth(-1); // Flip horizontally along the left edge of the bounding box.
shape.scaleHeight(-1); // Flip vertically along the top edge of the bounding box.

На рисунке ниже показано, как приведенный выше код работает на фигуре, повернутой на 45°. Обратите внимание, что элемент страницы переворачивается вдоль одного из краев ограничительной рамки, но не по центру.

Слайды «Отражение»

Вращение линии

Как и другие элементы страницы, поворот линии — это не вертикальный угол линии, а поворот ее ограничивающей рамки. Когда вы создаете линию с указанными начальной и конечной точками, ее поворот всегда равен 0°. Перетаскивание конечных точек линии в пользовательском интерфейсе Google Slides изменяет ее вертикальный угол, а также размер и положение ограничивающей рамки, но не меняет ее поворот. Использование setRotation() вращает ограничивающую рамку линии, что эффективно меняет ее вертикальный угол. Таким образом, две линии могут иметь одинаковый визуальный вертикальный угол, но разные ограничивающие рамки и, следовательно, разные размеры, положение и значения поворота.

Ограничения

Некоторые методы изменения размера и позиционирования несовместимы с некоторыми типами элементов страницы. В таблице ниже приведены методы, которые несовместимы с определенными типами элементов страницы.

Методы Форма Видео Стол
получитьВысоту(), получитьШирину() ✔ ✔ НЕТ (возвращает ноль)
УстановитьВысота(), УстановитьШирина() ✔ ✔ НЕТ
setRotation() ✔ НЕТ НЕТ
масштабВысота(), масштабШирина() ✔ ✔ НЕТ

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

Использование аффинных преобразований

Для расширенного контроля размер и положение элемента страницы также можно рассчитать и настроить с помощью его собственного (родного) размера и аффинного преобразования .

Google Apps Script предоставляет аналогичный интерфейс для использования аффинного преобразования, что и API Google Slides.

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

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

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

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

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

shape.scaleWidth(-1); // Flip horizontally along the left edge of the bounding box.
shape.scaleHeight(-1); // Flip vertically along the top edge of the bounding box.

На рисунке ниже показано, как приведенный выше код работает на фигуре, повернутой на 45°. Обратите внимание, что элемент страницы переворачивается вдоль одного из краев ограничительной рамки, но не по центру.

Слайды «Отражение»

Вращение линии

Как и другие элементы страницы, поворот линии — это не вертикальный угол линии, а поворот ее ограничивающей рамки. Когда вы создаете линию с указанными начальной и конечной точками, ее поворот всегда равен 0°. Перетаскивание конечных точек линии в пользовательском интерфейсе Google Slides изменяет ее вертикальный угол, а также размер и положение ограничивающей рамки, но не меняет ее поворот. Использование setRotation() вращает ограничивающую рамку линии, что эффективно меняет ее вертикальный угол. Таким образом, две линии могут иметь одинаковый визуальный вертикальный угол, но разные ограничивающие рамки и, следовательно, разные размеры, положение и значения поворота.

Ограничения

Некоторые методы изменения размера и позиционирования несовместимы с некоторыми типами элементов страницы. В таблице ниже приведены методы, которые несовместимы с определенными типами элементов страницы.

Методы Форма Видео Стол
получитьВысоту(), получитьШирину() ✔ ✔ НЕТ (возвращает ноль)
УстановитьВысота(), УстановитьШирина() ✔ ✔ НЕТ
setRotation() ✔ НЕТ НЕТ
масштабВысота(), масштабШирина() ✔ ✔ НЕТ

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

Использование аффинных преобразований

Для расширенного контроля размер и положение элемента страницы также можно рассчитать и настроить с помощью его собственного (родного) размера и аффинного преобразования .

Google Apps Script предоставляет аналогичный интерфейс для использования аффинного преобразования, что и API Google Slides.

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