Rozmiar i położenie elementu strony możesz wyświetlać oraz zmieniać na 2 sposoby:
- Używając funkcji pobierania i ustawiania rozmiaru i pozycji.
- Manipulowanie przekształceniem afinicznym 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 wyrenderowanej, 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. Użyj
getLeft()igetTop(), aby odczytać wartości. - Szerokość i wysokość: szerokość i wysokość nieobrotowanego prostokąta ograniczającego.
Aby odczytać wartości, użyj funkcji
getWidth()igetHeight(). - Obrót: obrót zgodnie z kierunkiem wskazówek zegara wokół pionowej linii wokół środka ramki. Użyj
getRotation(), aby odczytać wartość.
Wszystkie długości są mierzone w punktach (pt). Obrót jest mierzony w stopniach (°).
Ustawianie właściwości elementów strony
Rozmiar i pozycję elementu strony możesz ustawić podczas jego tworzenia za pomocą metody wstawiania, takiej jak 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.
W momencie utworzenia
Podczas tworzenia elementu strony możesz podać informacje o pozycji 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
Rozmiar i pozycję elementu strony możesz zmienić po jego utworzeniu:
- Użyj
setLeft()isetTop(), aby ustawić położenie lewego górnego rogu nieobrotowanego prostokąta ograniczającego. - Użyj właściwości
setWidth()isetHeight(), aby ustawić renderowaną szerokość i wysokość ramki ograniczającej. - Użyj właściwości
setRotation(), aby ustawić obrót ramki ograniczającej w prawo wokół jej środka.
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 trzeciego wiersza powyżej poniższym skryptem spowoduje taki sam efekt:
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 nieruchomy.
Odbicie wzdłuż krawędzi
Argumenty w funkcjach scaleWidth() i scaleHeight() mogą być ujemne, więc można ich użyć do odwrócenia elementu strony w pionie lub poziomie.
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 zawsze wynosi 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 funkcji setRotation() powoduje obrócenie ramki ograniczającej linii, co w praktyce zmienia jej kąt pionowy. 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 jest przesunięty, wszystkie metody ustawiania rozmiaru i pozycji 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 wyjaśniamy koncepcje przekształcenia afinacyjnego oraz wnioskowanie o wyrenderowany rozmiar na podstawie rozmiaru wewnętrznego i przekształcenia elementów strony. W Apps Script użyj:
getInherentWidth()igetInherentHeight()w przypadku natywnego rozmiaru elementów strony;getTransform()dla transformacji afinicznej elementów strony.
- W tym artykule znajdziesz informacje o tym, jak za pomocą transformacji afinicznej określać rozmiar i pozycję elementów strony, aby uzyskać efekt skalowania, obrotu, odbicia lustrzanego 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 przypadku trybu RELATIVE).
Poniższy skrypt tworzy kształt, ustawia jego przekształcenie, odczytuje jego rozmiar i odczytuje przekształcenie afiniczne.
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°.