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

有两种方法可以获取和更改 页面元素:

  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);

扩缩

不要使用上面的 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 幻灯片界面中线条的端点也会改变其垂直角度 作为其边界框的大小和位置, 旋转。使用 setRotation() 可以旋转线条的边界框, 可以有效地改变其垂直角度因此,两行 视觉垂直角度相同,但边界框不同,因此 设置不同的尺寸、位置和旋转值。

限制

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

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

无论网页如何调整尺寸和定位, 元素具有剪切功能。所有限制都可能会更改。查看参考文档 和最新信息。

使用仿射转换

对于高级控件,页面元素的大小和位置也可以 通过其固有(原生)大小和仿射转换进行计算和调整。

Google Apps 脚本提供了类似于 Google 幻灯片 API 来使用仿射转换的界面。

  • 要阅读的是, 文章解释了 仿射转换的概念以及如何根据固有特征 (原生)页面元素的大小和转换。在 Apps 脚本中,使用
    • getInherentWidth()getInherentHeight()(针对网页原生大小) 元素;
    • getTransform(),用于页面元素的仿射转换。
  • 写成 文章介绍了 如何使用仿射转换确定页面元素的大小和位置,以实现 例如缩放、旋转、反射等
    • setTransform(),用于设置页面元素的仿射转换(类似于 绝对模式);
    • 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°.