Seitenelemente anpassen und positionieren

Es gibt zwei Möglichkeiten, die Größe und Position eines Seitenelements abzurufen und zu ändern:

  1. Getter- und Setter-Funktionen für Größe und Position verwenden
  2. Die affine Transformation mit den Funktionen getTransform() und setTransform() bearbeiten und dabei die inhärente Größe beibehalten

Seitenelementeigenschaften werden gelesen

Größe und Drehen

Wie in der Abbildung dargestellt, werden Größe und Position in Bezug auf den Begrenzungsrahmen eines gerenderten Seitenelements gemessen, wenn es keine Drehung aufweist:

  • Left und Top: gemessen von der linken oberen Ecke der Seite bis zur linken oberen Ecke des nicht gedrehten Begrenzungsrahmens. Verwenden Sie getLeft() und getTop(), um die Werte zu lesen.
  • Breite und Höhe: die Breite und Höhe des nicht gedrehten Begrenzungsrahmens Verwenden Sie getWidth() und getHeight(), um die Werte zu lesen.
  • Drehung: Drehung im Uhrzeigersinn, bezogen auf die vertikale Linie um die Mitte des Begrenzungsrahmens. Verwenden Sie getRotation(), um den Wert zu lesen.

Alle Längen werden in Punkten (pt) gemessen. Die Drehung wird in Grad (°) gemessen.

Seitenelementeigenschaften festlegen

Sie können die Größe und Position eines Seitenelements festlegen, wenn Sie es mit einer Einfügemethode wie insertShape() erstellen. Für eine vorhandene Form können Sie Größe, Position und Drehung festlegen. Sie können auch die Skalierung eines Elements so festlegen, dass es seine Größe ändert oder es an einer seiner Ränder reflektiert.

Bei Erstellung

Sie können beim Erstellen eines Seitenelements Informationen zur Position und Größe angeben.

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

Das obige Skript erstellt auf der ersten Folie der aktiven Präsentation eine Form mit der angegebenen Position und Größe und liest die Positions- und Größeninformationen der Form. Das erwartete Log lautet:

Left: 100pt; Top: 200pt; Width: 300pt; Height: 60pt; Rotation: 0 degrees.

Größe, Position und Drehung

Sie können die Größe und Position eines Seitenelements nach dem Erstellen aktualisieren:

  • Verwenden Sie setLeft() und setTop(), um die Position der oberen linken Ecke des nicht gedrehten Begrenzungsrahmens festzulegen.
  • Mit setWidth() und setHeight() können Sie die Breite und Höhe des Begrenzungsrahmens festlegen.
  • Mit setRotation() legen Sie die Drehung des Begrenzungsrahmens im Uhrzeigersinn um seinen Mittelpunkt fest.

Mit dem folgenden Skript wird eine Form auf der ersten Folie der aktiven Präsentation erstellt. Es verwendet Setter, um die Position, Größe und Drehung zu aktualisieren, und liest die Positions- und Größeninformationen der Form.

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

Die erwartete Protokollausgabe von diesem Skript sieht wie folgt aus:

Left: 100pt; Top: 200pt; Width: 50pt; Height: 60pt; Rotation: 90°.

Die Festlegungen für Größe, Position und Drehung können in beliebiger Reihenfolge oder Kombination verwendet werden. Wenn Sie die dritte Zeile oben durch das folgende Skript ersetzen, erhalten Sie dasselbe Ergebnis:

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

Skalierung

Anstatt setWidth() und setHeight() oben zu verwenden, um die Größe der Form auf einen absoluten Wert festzulegen, können Sie mit scaleWidth() und scaleHeight() ein Seitenelement mit einem relativen Skalierungsfaktor strecken oder zusammendrücken.

shape.scaleHeight(0.5).scaleWidth(2);

Die folgende Abbildung zeigt, wie der obige Code bei einer um 45° gedrehten quadratischen Form funktioniert. Beachten Sie, dass die obere linke Ecke des Begrenzungsrahmens während der Skalierung unveränderlich bleibt.

Folien skalieren

Reflexion am Rand

Das Argument in scaleWidth() und scaleHeight() kann negativ sein, sodass sie dazu verwendet werden können, ein Seitenelement horizontal oder vertikal zu spiegeln.

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.

Die folgende Abbildung zeigt, wie der obige Code bei einer um 45° gedrehten Form funktioniert. Das Seitenelement wird an einer der Ränder des Begrenzungsrahmens gespiegelt, aber nicht an seiner Mitte.

Präsentationen – Reflexion

Linienrotation

Wie bei anderen Seitenelementen entspricht die Rotation einer Linie nicht dem vertikalen Winkel der Linie, sondern der Drehung des Begrenzungsrahmens. Wenn Sie eine Linie mit festgelegten Start- und Endpunkten erstellen, ist ihre Drehung immer 0°. Wenn Sie die Endpunkte der Linie in der Google Präsentationen-Benutzeroberfläche ziehen, ändert sich ihr vertikaler Winkel sowie die Größe und Position des Begrenzungsrahmens. Die Drehung bleibt jedoch unverändert. Mit setRotation() wird der Begrenzungsrahmen der Linie gedreht, wodurch sich auch der vertikale Winkel ändert. Zwei Linien können also denselben vertikalen visuellen Winkel, aber unterschiedliche Begrenzungsrahmen und daher unterschiedliche Größe, Position und Drehungswerte haben.

Beschränkungen

Einige Methoden zur Größenanpassung und Positionierung sind mit einigen Arten von Seitenelementen nicht kompatibel. In der folgenden Tabelle sind die Methoden zusammengefasst, die mit bestimmten Arten von Seitenelementen nicht kompatibel sind.

Methoden Form Video Tabelle
getHeight(), getWidth() NO (gibt Null zurück)
setHeight(), setWidth() NEIN
setRotation() NEIN NEIN
scaleHeight(), scaleWidth() NEIN

Alle Methoden zur Größenanpassung und Positionierung können zu unerwarteten Ergebnissen führen, wenn das Seitenelement Scherungen aufweist. Alle Einschränkungen können sich ändern. Aktuelle Informationen finden Sie in der Referenz.

Affine Transformationen verwenden

Für eine erweiterte Kontrolle können die Größe und Position eines Seitenelements auch über die inhärente (native) Größe und die affine Transformation berechnet und angepasst werden.

Google Apps Script bietet eine ähnliche Oberfläche zur Verwendung der affine Transformation wie die Google Slides API.

  • In diesem Artikel werden die Konzepte der affinen Transformation erläutert. Außerdem erfahren Sie, wie Sie die gerenderte Größe aus der inhärenten (nativen) Größe und der Transformation für Seitenelemente ableiten. Verwenden Sie in Apps Script
    • getInherentWidth() und getInherentHeight() für die native Größe der Seitenelemente.
    • getTransform() für die affine Transformation der Seitenelemente
  • In diesem Artikel wird beschrieben, wie Seitenelemente mithilfe der affine Transformation skaliert und positioniert werden, um Skalierung, Rotation, Reflexion usw. zu erreichen. Verwenden Sie in Apps Script
    • setTransform(), um die affine Transformation von Seitenelementen festzulegen (ähnlich dem Modus „ABSOLUTE“);
    • preconcatenateTransform(), um eine affine Transformation mit der aktuellen Transformation von Seitenelementen vorzuverketten (ähnlich dem Modus RELATIVE).

Das folgende Skript erstellt eine Form, legt ihre Transformation fest, liest ihre inhärente Größe und liest ihre affine Transformation.

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

Die erwartete Protokollausgabe von diesem Skript sieht wie folgt aus:

Inherent width: 236.2pt; Inherent height: 236.2pt.

Die resultierende Form hat folgende Transformation sowie gerenderte Größe und Position:

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