Seitenelemente anpassen und positionieren

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

  1. Mithilfe der Getter- und Setter-Funktionen für Größe und Position
  2. Die affine Transformation mithilfe der Funktionen getTransform() und setTransform() manipulieren, wobei die ursprüngliche Größe beibehalten wird.

Eigenschaften von Seitenelementen lesen

Größe und Drehung

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

  • Links und Oben: gemessen von der oberen linken Ecke der Seite bis zur oberen linken Ecke des nicht gedrehten Begrenzungsrahmens. Verwenden Sie getLeft() und getTop(), um die Werte abzulesen.
  • Breite und Höhe: Breite und Höhe des unbewegten Begrenzungsrahmens. Verwenden Sie getWidth() und getHeight(), um die Werte zu lesen.
  • Drehung: Drehung im Uhrzeigersinn relativ zur vertikalen Linie um den Mittelpunkt des Begrenzungsrahmens. Verwenden Sie getRotation(), um den Wert abzurufen.

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

Eigenschaften von Seitenelementen festlegen

Sie können die Größe und Position eines Seitenelements beim Erstellen mit einer Einfügemethode wie insertShape() festlegen. Bei einer vorhandenen Form können Sie die Größe, Position und Drehung festlegen. Außerdem können Sie die Skalierung eines Elements so einstellen, dass es verkleinert oder entlang einer seiner Kanten gespiegelt wird.

Bei der Erstellung

Beim Erstellen eines Seitenelements können Sie 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 Script erstellt auf der ersten Folie der aktiven Präsentation eine Form mit der angegebenen Position und Größe und liest die Informationen zur Position und Größe der Form. Das erwartete Protokoll ist:

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 linken oberen Ecke des unbewegten Begrenzungsrahmens festzulegen.
  • Mit setWidth() und setHeight() können Sie die gerenderte Breite und Höhe des Begrenzungs-Quadrats festlegen.
  • Mit setRotation() können Sie den Begrenzungsrahmen im Uhrzeigersinn um seine Mitte drehen.

Das folgende Script erstellt eine Form auf der ersten Folie der aktiven Präsentation, aktualisiert ihre Position, Größe und Drehung mithilfe von Settern und liest die Informationen zur Position und Größe 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 dieses Scripts sieht unten so aus:

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

Die Einstellungen 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 Script 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 scaleWidth() und scaleHeight() verwenden, um ein Seitenelement mit einem relativen Skalierungsfaktor zu vergrößern oder zu verkleinern.

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

Die folgende Abbildung zeigt, wie der Code oben auf einem um 45 Grad gedrehten Quadrat funktioniert. Die linke obere Ecke des Begrenzungsrahmens bleibt beim Skalieren unverändert.

Skalierung von Folien

Reflexion entlang der Kante

Das Argument in scaleWidth() und scaleHeight() kann negativ sein, damit sich ein Seitenelement horizontal oder vertikal drehen lässt.

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 Code oben auf einer um 45 Grad gedrehten Form funktioniert. Beachten Sie, dass das Seitenelement an einer der Ränder des Begrenzungsrahmens gespiegelt wird, nicht aber in der Mitte.

Folienreflexion

Zeilenrotation

Wie bei anderen Seitenelementen ist die Drehung einer Linie nicht der vertikale Winkel der Linie, sondern die Drehung ihres Begrenzungsrahmens. Wenn Sie eine Linie mit festgelegten Anfangs- und Endpunkten erstellen, ist die Drehung immer 0°. Wenn Sie die Endpunkte der Linie in Google Präsentationen ziehen, ändert sich der vertikale Winkel sowie die Größe und Position des Begrenzungsrahmens, aber nicht die Drehung. Mit setRotation() wird der Begrenzungsrahmen der Linie gedreht, wodurch sich der vertikale Winkel ändert. Zwei Linien können also denselben visuellen vertikalen Winkel haben, aber unterschiedliche Begrenzungsboxen und daher unterschiedliche Werte für Größe, Position und Drehung.

Beschränkungen

Einige Größen- und Positionierungsmethoden sind mit bestimmten 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() NEIN (liefert „null“ zurück)
setHeight(), setWidth() NEIN
setRotation() NEIN NEIN
scaleHeight(), scaleWidth() NEIN

Alle Größen- und Positionierungsmethoden können zu unerwarteten Ergebnissen führen, wenn das Seitenelement eine Schrägstellung hat. Alle Einschränkungen können sich ändern. Aktuelle Informationen finden Sie in der Referenz.

Affine Transformationen verwenden

Für eine erweiterte Steuerung können Größe und Position eines Seitenelements auch anhand seiner ursprünglichen (nativen) Größe und affinen Transformation berechnet und angepasst werden.

Google Apps Script bietet eine ähnliche Benutzeroberfläche für die Verwendung der affinen Transformation wie die Google Präsentationen API.

  • In diesem Artikel werden die Konzepte der affinen Transformation und die Ableitung der gerenderten Größe aus der ursprünglichen Größe und Transformation für Seitenelemente erläutert. Verwenden Sie in Apps Script den Befehl
    • getInherentWidth() und getInherentHeight() für die native Größe von Seitenelementen;
    • getTransform() für die affine Transformation der Seitenelemente.
  • In diesem Artikel wird beschrieben, wie Sie Seitenelemente mithilfe einer affinen Transformation skalieren, drehen, spiegeln usw. In Apps Script verwenden Sie dazu
    • setTransform(), um die affine Transformation von Seitenelementen festzulegen (ähnlich wie im ABSOLUTE-Modus);
    • preconcatenateTransform(), um eine affine Transformation mit der aktuellen Transformation von Seitenelementen zu verketten (ähnlich wie im RELATIVEN Modus).

Im folgenden Script wird eine Form erstellt, die Transformation festgelegt, die eigene Größe gelesen und die affine Transformation gelesen.

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 dieses Scripts sieht unten so aus:

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

Die resultierende Form hat die folgende Transformation sowie die 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°.