Rozmiary i położenie elementów strony

Rozmiar i pozycję elementu strony możesz pobierać i zmieniać na 2 sposoby:

  1. Korzystanie z funkcji getter i setter dla rozmiaru i pozycji.
  2. Manipulowanie przekształceniem afinicznym z użyciem funkcji getTransform() i setTransform() przy zachowaniu naturalnego rozmiaru.

Odczytywanie właściwości elementu strony

Rozmiar i rotacja

Jak widać na ilustracji, rozmiar i pozycja są mierzone w odniesieniu do ramki ograniczającej renderowanego elementu strony, gdy nie ma on obrotu:

  • Lewo i Góra: mierzone od lewego górnego rogu strony do lewego górnego rogu nieobróconej ramki ograniczającej. Aby odczytać wartości, użyj getLeft() i getTop().
  • Szerokość i wysokość: szerokość i wysokość nieobróconej ramki ograniczającej. Do odczytywania wartości użyj funkcji getWidth() i getHeight().
  • Obrót: obrócenie w prawo względem linii pionowej wokół środka ramki ograniczającej. Aby odczytać wartość, użyj funkcji getRotation().

Wszystkie długości są mierzone w punktach (pt). Obrót jest mierzony w stopniach (°).

Ustawianie właściwości elementów strony

Podczas tworzenia elementu strony możesz go określić za pomocą metody wstawiania takiej jak insertShape(). W przypadku istniejącego kształtu możesz określić rozmiar, położenie i obrót. Możesz też ustawić skalowanie elementu, aby zmienić jego rozmiar lub odbić go wzdłuż jednej z jego krawędzi.

Podczas tworzenia

Podczas tworzenia elementu strony możesz podać informacje o położeniu i rozmiarze.

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

Powyższy skrypt tworzy kształt na pierwszym slajdzie aktywnej prezentacji z określonym położeniem i rozmiarem oraz odczytuje informacje o położeniu i rozmiarze kształtu. Oczekiwany dziennik:

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

Rozmiar, pozycja i obrót

Po utworzeniu elementu strony możesz zmienić jego rozmiar i pozycję:

  • Za pomocą setLeft() i setTop() możesz ustawić położenie lewego górnego rogu nieobróconej ramki ograniczającej.
  • Użyj setWidth() i setHeight(), by ustawić wyrenderowaną szerokość i wysokość ramki ograniczającej.
  • Użyj setRotation(), by ustawić obrót ramki ograniczającej wokół jej środka w prawo.

Poniższy skrypt tworzy kształt na pierwszym slajdzie aktywnej prezentacji, używa ustawień do aktualizacji jej położenia, rozmiaru i obrotu oraz odczytuje informacje o położeniu i rozmiarze kształtu.

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

Oczekiwane dane wyjściowe dziennika tego skryptu wyglądają tak:

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

Ustawienia rozmiaru, pozycji i obrotu mogą być używane w dowolnej kolejności i w dowolnej kombinacji. Zastąpienie trzeciego wiersza powyżej tym skryptem da ten sam wynik:

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

Skalowanie

Zamiast korzystać z setWidth() i setHeight() do ustawiania wartości bezwzględnej rozmiaru kształtu, możesz użyć scaleWidth() i scaleHeight() do rozciągnięcia lub ściśnięcia elementu strony za pomocą względnego współczynnika skalowania.

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

Rysunek poniżej przedstawia, jak powyższy kod działa na planie kwadratu obróconym o 45°. Pamiętaj, że lewy górny róg ramki ograniczającej jest stały podczas skalowania.

Skalowanie slajdów

Odbicie wzdłuż krawędzi

Argumenty w funkcjach scaleWidth() i scaleHeight() mogą być ujemne, dzięki czemu można ich użyć do odwrócenia elementu strony w poziomie lub w pionie.

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.

Rysunek poniżej przedstawia, jak powyższy kod działa na planie obróconym o 45°. Zwróć uwagę, że element strony jest odwrócony wzdłuż jednej z krawędzi ramki ograniczającej, ale nie jest pośrodku.

Odbicie Prezentacji

Obrót linii

Podobnie jak w przypadku innych elementów strony, obrót linii to nie jej kąt pionowy, ale obrót jej ramki ograniczającej. Gdy tworzysz linię z określonym punktem początkowym i końcowym, jej obrót zawsze wynosi 0°. Przeciąganie punktów końcowych linii w interfejsie Prezentacji Google zmienia kąt pionowy oraz rozmiar i położenie ramki ograniczającej, ale nie powoduje zmiany jej obrotu. Używanie funkcji setRotation() powoduje obrócenie ramki ograniczającej linii, co w efekcie zmienia jej kąt pionowy. Dwie linie mogą więc mieć ten sam kąt widzenia w pionie, ale różne ramki ograniczające oraz różne wartości rozmiaru, położenia i obrotu.

Ograniczenia

Niektóre metody określania rozmiaru i pozycjonowania są niezgodne z niektórymi typami elementów strony. W tabeli poniżej podano metody, które są niezgodne z określonymi typami elementów stron.

Metody Kształt Wideo Tabela
getHeight(), getWidth() NO (zwraca wartość null)
setHeight(), setWidth() NO
setRotation() NO NO
scaleHeight(), scaleWidth() NO

Wszystkie metody określania rozmiaru i pozycjonowania mogą dawać nieoczekiwane rezultaty, jeśli element strony się ścina. Wszystkie ograniczenia mogą ulec zmianie. Aktualne informacje znajdziesz w pliku referencyjnym.

Zastosowanie przekształceń afinicznych

Na potrzeby kontroli zaawansowanej rozmiar i pozycję elementu strony można też obliczać i dostosowywać, używając jego wbudowanego rozmiaru (natywnego) i przekształcenia afinicznego.

Skrypt Google Apps Script zapewnia podobny interfejs do stosowania przekształcenia afinalnego jak interfejs API Prezentacji Google.

  • W tym artykule znajdziesz omówienie pojęć przekształcenia afinalnego oraz sposobu wyznaczania rozmiaru renderowanego na podstawie rozmiaru wbudowanego (natywnego) i przekształcania elementów strony. W Apps Script użyj polecenia
    • getInherentWidth() i getInherentHeight() oznacza natywny rozmiar elementów strony,
    • getTransform() dla przekształcenia afinicznego elementów strony.
  • W tym artykule opisujemy, jak ustawić rozmiar i położenie elementów strony za pomocą przekształcenia afinalnego w celu uzyskania skalowania, rotacji, odbicia itp. W Apps Script użyj funkcji
    • setTransform(), aby ustawić przekształcenie afiniczne elementów strony (podobnie jak w trybie BEZPOŚREDNIM);
    • preconcatenateTransform(), aby wstępnie połączyć przekształcenie afiniczne z bieżącym przekształceniem elementów strony (podobnie do trybu RELATIVE).

Ten skrypt tworzy kształt, ustawia jego przekształcenie, odczytuje jej całkowity rozmiar i odczytuje transformację afiniczną.

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

Oczekiwane dane wyjściowe dziennika tego skryptu wyglądają tak:

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

Powstały kształt będzie miał następujące przekształcenie oraz rozmiar i pozycję renderowania:

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