Wykorzystanie ramki do przewijania przy wyświetlaniu dużych obrazków

Do ćwiczenia przydatne będą komponenty Image i ScrolIBox. Komponent Ima-ge służy do demonstrowania bitmapy. Podstawowe właściwości:

Stretch - typ Boolean. Ustawienie tej właściwości na True oznacza przeskalowanie obrazka do rozmiarów komponentu Image. Wartość False oznacza, że obrazek jest wyświetlany w swojej naturalnej wielkości, przy czym wyświetlany jest jego fragment, gdy rozmiary komponentu Image są zbyt małe.

Picture - właściwość, która sama jest obiektem. Metoda właściwości Picture. LoadFromFiIe(const FileName: String) - pobiera z dysku obraz o podanej nazwie (ścieżce dostępu) i wyświetla na komponencie Image. Ustawienie ścieżki do pliku możliwe jest także w oknie Object Inspector.

Komponent ScrollBox jest ramką z paskiem przewijania poziomym i pionowym służącymi do przesuwania umieszczonych w ramce elementów (tekstu lub obrazków), gdy rozmiary przeglądanych obiektów przekraczają rozmiary ramki.

Ćwiczenie

Zadanie aplikacji

Aplikacja demonstruje przeglądanie obrazka w oknie z suwakami. Suwaki pokazują się wtedy, gdy rozmiary okna są mniejsze niż rozmiary obrazka.

Nowe umiejętności

Użycie komponentów ScrollBox i Image. Dołączanie bitmapy do formularza.

Rysunek 1ScrollBox z obrazkiem

Tok ćwiczenia

1. Wstaw na formularzu komponent ScrollBox z karty Additional. Nadaj mu rozmiary okna do przeglądania.

2. Na komponencie ScrollBox umieść komponent Image, ustaw jego właściwości:

Align alClient //Image zajmuje całą powierzchnię komponentu ScrollBox,

Stretch True //rozciąganie - dopasowanie wielkości obrazka do wielkości Image,

Picture //kliknij z prawej strony okna właściwości i w oknie wyboru pliku wybierz, przyciskiem Load jeden z obrazków (np. z katalogu Delphi\Images\Splash\16color\). Po wybraniu obrazka naciśnij przycisk Otwórz, a następnie OK.

3. Uruchom aplikacje i sprawdź działanie okna.

4. Ustaw dla komponentu Image właściwość: Align alNone

Przejdź do komponentu ScrollBar i zmniejsz jego rozmiary tak, aby pokazały się paski przewijania.

5. Uruchom ponownie aplikacje i sprawdź możliwość przesuwania obrazka.

---