Rozmiar i położenie elementu strony możesz uzyskać i zmienić na 2 sposoby:
- Używanie funkcji pobierania i ustawiania rozmiaru i pozycji.
- manipulowanie transformacją afiniczną za pomocą funkcji
getTransform()isetTransform()przy zachowaniu rozmiaru wewnętrznego.
Odczytywanie właściwości elementów strony
Jak widać na rysunku, rozmiar i pozycję mierzy się względem ogranicznika elementu strony wyrenderowanego, gdy nie jest on obracany:
- Lewo i góra: mierzone od lewego górnego rogu strony do lewego górnego rogu nieobrotowanego prostokąta ograniczającego. Do odczytu wartości użyj właściwości
getLeft()igetTop(). - Szerokość i wysokość: szerokość i wysokość nieobrotowanego prostokąta ograniczającego.
Do odczytu wartości użyj wartości
getWidth()igetHeight(). - Obrót: obrót zgodnie z ruchem wskazówek zegara wokół pionowej linii wokół środka ramki. Aby odczytać wartość, użyj
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 ustawić jego rozmiar i pozycję za pomocą metody wstawiania, np. insertShape(). W przypadku istniejącego kształtu możesz ustawić jego rozmiar, położenie i obrót. Możesz też zmienić jego skalę lub odbicie lustrzane wzdłuż jednego z krawędzi.
Podczas tworzenia
Podczas tworzenia elementu strony możesz podać informacje o jego 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 na pierwszym slajdzie aktywnej prezentacji kształt o określonym położeniu i rozmiarze oraz odczytuje informacje o położeniu i rozmiarze tego kształtu. Oczekiwany dziennik:
Left: 100pt; Top: 200pt; Width: 300pt; Height: 60pt; Rotation: 0 degrees.
Rozmiar, położenie i obrót
Po utworzeniu elementu strony możesz zaktualizować jego rozmiar i położenie:
- Użyj
setLeft()isetTop(), aby ustawić położenie lewego górnego rogu nieobrotowanego prostokąta ograniczającego. - Użyj wartości
setWidth()isetHeight(), aby ustawić renderowaną szerokość i wysokość ograniczonego prostokąta. - Użyj
setRotation(), aby ustawić obrót prostokąta ograniczającego wokół jego środka zgodnie z kierunkiem wskazówek zegara.
Ten skrypt tworzy kształt na pierwszym slajdzie aktywnej prezentacji, używa setterów do aktualizowania jego 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 tego skryptu to:
Left: 100pt; Top: 200pt; Width: 50pt; Height: 60pt; Rotation: 90°.
Ustawienia rozmiaru, położenia i rotacji można używać w dowolnej kolejności lub kombinacji. Zastąpienie 3. wiersza powyższym skryptem da ten sam wynik:
shape.setWidth(55);
shape.setRotation(90).setHeight(60).setLeft(100);
shape.setWidth(50).setTop(200);
Skalowanie
Zamiast używać setWidth() i setHeight(), aby ustawić rozmiar kształtu na wartość bezwzględną, możesz użyć scaleWidth() i scaleHeight(), aby rozciągnąć lub ścisnąć element strony za pomocą współczynnika skalowania względnego.
shape.scaleHeight(0.5).scaleWidth(2);
Na rysunku poniżej widać, jak kod działa na kwadracie obróconym o 45°. Pamiętaj, że podczas skalowania lewy górny róg pola ograniczającego jest stały.
Odbicie wzdłuż krawędzi
Argument w elementach scaleWidth() i scaleHeight() może być ujemny, dzięki czemu można go używać do przewracania 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 pokazuje, jak działa powyższy kod w przypadku kształtu obróconego o 45°. Zwróć uwagę, że element strony jest odwrócony wzdłuż jednego z krawędzi jego prostokąta ograniczającego, a nie wzdłuż jego środka.
Obrót linii
Podobnie jak w przypadku innych elementów strony, obrót linii nie jest kątem pionowym linii, ale obrotem jej prostokąta ograniczającego. Gdy tworzysz linię z określonymi punktami początkowym i końcowym, jej obrót wynosi zawsze 0°. Przeciąganie punktów końcowych linii w interfejsie Google Slides zmienia jej kąt pionowy, a także rozmiar i położenie jej prostokąta ograniczającego, ale nie zmienia jej obrotu. Użycie setRotation() powoduje obrócenie prostokąta ograniczającego linii, co zmienia jej kąt nachylenia. Oznacza to, że 2 linie mogą mieć ten sam kąt wizualny w pionie, ale różne ramki ograniczające, a co za tym idzie różne wartości rozmiaru, położenia i obrotu.
Ograniczenia
Niektóre metody ustawiania rozmiaru i pozycji są niezgodne z niektórymi typami elementów strony. Tabela poniżej zawiera podsumowanie metod, które są niezgodne z określonymi typami elementów strony.
| Metody | Kształt | Wideo | Tabela |
|---|---|---|---|
| getHeight(), getWidth() | ✔ | ✔ | NO (zwraca wartość null) |
| setHeight(), setWidth() | ✔ | ✔ | NIE |
| setRotation() | ✔ | NIE | NIE |
| scaleHeight(), scaleWidth() | ✔ | ✔ | NIE |
Jeśli element strony ma przesunięcie, wszystkie metody dostosowywania rozmiaru i umieszczania mogą dać nieoczekiwane wyniki. Wszystkie ograniczenia mogą ulec zmianie. Najnowsze informacje znajdziesz w dokumentacji.
Używanie przekształceń afinistycznych
Aby uzyskać większą kontrolę, rozmiar i pozycję elementu strony można też obliczyć i dostosować za pomocą jego wbudowanego (natywnego) rozmiaru i transformacji afinistycznej.
Google Apps Script udostępnia podobny interfejs do korzystania z transformacji afinicznej, co interfejs Google Slides API.
- W tym artykule znajdziesz informacje o koncepcji transformacji afinicznej oraz o tym, jak wywnioskować renderowany rozmiar z właściwego (natywnego) rozmiaru i transformacji elementów strony. W Apps Script użyj:
getInherentWidth()igetInherentHeight()w przypadku natywnego rozmiaru elementów strony;getTransform()do transformacji afinicznej elementów strony.
- W tym artykule znajdziesz informacje o tym, jak za pomocą transformacji afinicznej zmieniać rozmiar i pozycję elementów strony, aby uzyskać powiększenie, obrót, odbicie lustrzane itp. W Google Apps Script użyj funkcji
setTransform()aby ustawić transformację afiniczną elementów strony (podobną do trybu ABSOLUTE);preconcatenateTransform()wstępnie konkatenować transformację afiniczną do bieżącej transformacji elementów strony (podobnie jak w trybie RELATIVE).
Ten skrypt tworzy kształt, ustawia jego transformację, odczytuje jego rozmiar i odczytuje jego 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 tego skryptu to:
Inherent width: 236.2pt; Inherent height: 236.2pt.
Wygenerowany kształt będzie miał następującą transformację oraz renderowany rozmiar i położenie:
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°.