调整页面元素的大小和位置

您可以通过两种不同的方式来获取和更改页面元素的大小和位置:

  1. 针对大小和位置使用其 getter 和 setter 函数。
  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() 设置边界框围绕其中心的顺时针旋转。

以下脚本会在当前演示文稿的第一张幻灯片上创建一个形状,使用 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°.

尺寸、位置和旋转设置器可以按任意顺序或组合使用。将上面的第三行替换为下面的脚本将产生相同的结果:

shape.setWidth(55);
shape.setRotation(90).setHeight(60).setLeft(100);
shape.setWidth(50).setTop(200);

扩缩

scaleWidth()scaleHeight() 可用于以相对缩放比例拉伸或挤压页面元素,而不是使用上面的 setWidth()setHeight() 将形状的尺寸设置为绝对值。

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 幻灯片界面中拖动线条的端点会更改其垂直角度以及其边界框的大小和位置,但不会更改其旋转角度。使用 setRotation() 可以旋转线条的边界框,这实际上可以更改其垂直角度。因此,两条线的视觉垂直角度可以相同,但边界框不同,因此尺寸、位置和旋转角度值也不同。

限制

一些大小和定位方法与某些类型的页面元素不兼容。下表总结了与某些类型的页面元素不兼容的方法。

方法 形状 视频
getHeight(), getWidth() NO(返回 null)
setHeight(), setWidth()
setRotation()
scaleHeight(), scaleWidth()

如果页面元素有剪切,则所有大小和定位方法都可能会出现意外结果。所有限制都可能会更改。如需了解最新信息,请查看参考文档。

使用仿射转换

对于高级控制,您还可以通过页面元素固有(原生)大小和仿射转换来计算和调整页面元素的大小和位置。

Google Apps 脚本提供了与 Google 幻灯片 API 一样使用仿射转换的类似接口。

  • 为了阅读相关内容,这篇文章介绍了仿射转换的概念,以及如何根据页面元素的固有(原生)大小和转换推断渲染大小。在 Apps 脚本中,使用
    • getInherentWidth()getInherentHeight(),表示页面元素的原生尺寸;
    • getTransform(),用于页面元素的仿射转换。
  • 为此,这篇文章介绍了如何使用仿射转换确定页面元素的大小和位置,以实现缩放、旋转、反射等。在 Apps 脚本中,请使用
    • 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°.