8 Aplikacja zawiera przykłady ilustrujące wybrane metody graficzne .

I

NSTRUKCJA DO

Ć

WICZENIA

8 Aplikacja zawiera przykłady ilustrujące wybrane metody graficzne .

I.

Ilustracja metod rysujących podstawowe elementy graficzne

1. Utwórz w środowisku NetBeans nowy projekt typu Java Class Library o nazwie Projekt81, wybierz odpowiednią lokalizację projektu. Poleceniem New... z menu podręcznego dodaj do projektu plik typu ^{JFrame Form,} nadając nowej klasie nazwę Grafika i umieszczając ją w pakiecie o dowolnej nazwie

2. W konstruktorze klasy ^Grafika poniżej wywołania metody initComponents() wywołaj metodę określającą rozmiary ramki: setSize(500, 500);

3. Poniżej konstruktora klasy Grafika wpisz predefiniowaną metodę o nazwie paint, tworzącą na powierzchni kontekstu graficznego ramki, rysunek złożony z elementów geometrycznych: linii poziomej, konturu prostokąta i wypełnionego prostokąta

public void paint(Graphics g) { // klasę Graphics trzeba importować g.setColor(Color.red);

g.drawLine(0, getHeight() / 2, getWidth(), getHeight() / 2); //czerwona linia g.setColor(Color.magenta);

g.drawRect(30, 70, 80, 90); // ramka prostokąta

g.fillRect(30, 70 + getHeight() / 2, 80, 90); // wypełniony prostokąt }

Powyższe instrukcje wymagają zaimportowania klasy java.awt.Graphics oraz java.awt.Color poleceniem Fix Imports

z menu podręcznego; odpowiednia klauzula importu pojawi się w początkowej części programu.

4. Uruchom aplikację i zobacz efekt wykonania metody paint.

5. Ustal kolor tła rysunku dopisując do konstruktora klasy Grafika wywołanie metody setBackground(Color.white); a następnie na początku metody paint()

wywołaj metodę, która zamaluje obszar rysunku tym kolorem:

g.clearRect(0, 0, getWidth(), getHeight());

6. Sprawdź efekt działania dodanych instrukcji.

7. Dodaj na koniec metody paint() instrukcje, które rysują czerwonym kolorem owale na środku szerokości okna, powyżej i poniżej linii poziomej; następująco.

g.setColor(Color.red);

g.drawOval(getWidth() / 2 - 40, 70, 80, 90);

g.fillOval(getWidth() / 2 - 40, 70 + getHeight() / 2, 80, 90);

8. Do narysowania następnych dwóch figur użyjemy niestandardowego koloru

klasy Color. W tym celu dopisz do metody paint() instrukcje tworzące nowy kolor o podanych trzech parametrach, będących kolejno nasyceniami koloru czerwonego, zielonego i niebieskiego. Następnie ustaw ten kolor na kontekście graficznym:

Color k1 = new Color(36, 36, 255);

g.setColor(k1);

9. Nowym kolorem narysuj łuk i wycinek narysowanego wcześniej okręgu i koła (kąt środkowy łuku i wycinka wynosi 85 stopni i rysowany jest począwszy od kąta skierowanego równego 45 stopni)

g.drawArc(getWidth() / 2 - 40, 70, 80, 90, 45, 85);

g.fillArc(getWidth() / 2 - 40, 70 + getHeight() / 2, 80, 90, 45, 85);

10. Uruchom aplikację

11. Do narysowania kolejnych figur użyjemy koloru losowego, otrzymanego przez losowanie parametrów konstruktora klasy Color. Parametry te określają nasycenia kolorów czerwonego, zielonego i niebieskiego i muszą być liczbami całkowitymi z przedziału <0, 255>. W tym celu dopisz do metody paintComponent() kolejne instrukcje:

Random r = new Random();

Color k2 = new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255));//

g.setColor(k2);

12. Dodaj instrukcje, które tworzą ośmiokąt foremny (obiekt klasy Polygon) i narysują go z użyciem metod drawPolygon() i fillPolygon():

Polygon p = new Polygon();

double alfa = 2*Math.PI/8;

int x0 = getWidth() - 100, y0 = 120; //środek koła opisanego na wieloboku int r0=50;// //promień koła opisanego na wieloboku

for (int i=0; i<8;i++){

// kolejne współrzędne wierzchołków ośmiokąta foremnego wpisanego w koło o promieniu r0 i środku (x0, y0) int xp= x0 + (int) (r0*Math.cos(i*alfa));

int yp= y0 + (int)(r0*Math.sin(i*alfa));

p.addPoint(xp,yp); }

g.drawPolygon(p);

p.translate(0, getHeight()/2); // przesunięcie obiektu p na kontekście graficznym o wektor[0, getHeight()/2] g.fillPolygon(p);

13. Uruchom program

14. Pod instrukcją rysującą obramowanie prostokąta namaluj tekst, a jego początek umieść w punkcie o współrzędnych (30, 200) wywołując metodę:

g.drawString("prostokąt", 30, 200);

15. Analogiczne napisy umieść pod każdą narysowaną figurą, w takim miejscu, by były tego samego koloru co figura.

16. Narysuj niestandardowym kolorem trójkąt równoramienny o czarnym konturze, o podstawie będącej dolną krawędzią paska tytułu ramki i wysokości 35 pikseli. W tym celu zadeklaruj tablice zawierające współrzędne wierzchołków trójkąta i wywołaj metodę fillPolygon() rysującą zadany wielobok.

Przy wyznaczaniu współrzędnych pionowych wierzchołków trójkąta należy wziąć pod uwagę wysokość paska tytułu ramki, która wynosi ok. 30 pikseli.

Poniższe instrukcje dopisz do metody paint ()

int[] x = {0, getWidth()/2, getWidth()}; //tablica współrzędnych x wierzchołków trójkąta int[] y = {30, 65,30}; // tablica zawierająca współrzędne y wierzchołków trójkąta Color k3 = new Color(100, 240, 50);

g.setColor(k3);

g.fillPolygon(x, y, 3); //rysowanie wieloboku o 3 wierzchołkach umieszczonych w tablica x i y

g.setColor(Color.black);

g.drawPolygon(x, y, 3);

17. Uruchom aplikację i obejrzyj efekt wprowadzonych zmian. Zaobserwuj również odświeżanie metody panit() poprzez zmianę rozmiaru okna.

II.

Zmiana czcionki i wyśrodkowanie napisu

1. Aby zmienić rodzaj czcionki wyświetlanego tekstu, na początku metody paint, zadeklaruj obiekt klasy ^Font, który reprezentuje czcionkę tekstu, oraz dopisz instrukcję przypisującą obiekt czcionki do kanwy graficznej:

Font f =new Font("SanSerif",Font.ITALIC,16); //utworzenie czcionki o podanej nazwie, stylu i rozmiarze g.setFont(f); //przypisanie czcionki do kanwy

2. Zaimportuj klasę Font, uruchom aplikację i obejrzyj efekt zmiany czcionki.

3. Aby wyświetlić dany tekst pośrodku górnej krawędzi okna ramki wykorzystamy klasę FontMetrics, która udostępnia właściwości czcionki przypisanej do obiektu graficznego. Pod instrukcją rysującą trójkąt dopisz instrukcje

String s = "Rysowanie figur geometrycznych";

int z = getWidth() / 2 - g.getFontMetrics(f).stringWidth(s) / 2;

// połowa szerokości panelu minus połowa szerokości tekstu s

g.drawString(s, z, 50); // tekst s będzie wyświetlony na środku szerokości panelu

4. Uruchom program.

III.

Tworzenie wykresu słupkowego losowych wartości umieszczonych w

tablicy o elementach całkowitych

1. Antologicznie jak w punkcie I.1 utwórz nowy projekt na bazie klasy JFrame z pakietu Swing o nazwie Projekt82, z klasą główną o nazwie Wykres

.

2. Pod nagłówkiem klasy Wykres zadeklaruj tablicę t zawierającą 10 elementów całkowitych:int[] t = new int[10];



3. Pod nagłówkiem klasy Wykres umieść również deklarację obiektu klasy Random, za pomocą którego będziemy generować liczby całkowite:

Random r = new Random();

4. Poniżej konstruktora klasy Wykres wpisz metodę rysującą na powierzchni ramki białe tło. Tym razem skorzystamy z metody fillRect () .

public void paint(Graphics g) { super.paint(g);

int sz = getWidth();

int ws = getHeight();

g.setColor(Color.lightGray);

g.fillRect(0, 0, sz, ws);

}

5. Uruchom program i sprawdź czy kontekst graficzny ramki został wypełniony kolorem białym.

6. Aby na naszej ramce narysować wykres słupkowy odpowiadający każdej z dziesięciu wylosowanych wartości należy obliczyć szerokość i wysokość każdego słupka. Szerokość wszystkich słupków będzie taka sama i równa 1/

10 szerokości

ramki, natomiast wysokość słupków obliczymy z proporcji, przyjmując, że największej wartości czyli 20, odpowiada wysokość słupka równej wysokości ramki pomniejszonej o wysokość paska tytułu.

Dopisz zatem na koniec metody paint () następujące instrukcje:

int d = sz / 10; // szerokość każdego słupka wykresu for (int i = 0; i < 10; i++) {

t[i] = 1 + r.nextInt(20); //wylosowanie do tablicy i-tej wartości z zakresu 1..20 g.setColor(new Color(r.nextInt(256), r.nextInt(256), r.nextInt(256)));

int h = (ws - 30) * t[i] / 20; // wysokość i-tego słupka wykresu

g.fillRect(i * d, ws - h, d, h); // i*d odległość i-tego prostokąta od lewej krawędzi ramki,

//ws–h odległość od dolnej krawędzi panelu, d,h-szerokość, wysokość prostokąta }

7. Uruchom aplikację i zaobserwuj odświeżanie metody panit() poprzez zmianę rozmiaru okna.

8. W metodzie paint() przed pętlą for umieść instrukcję tworzące czcionkę i przypisz ją do kontekstu graficznego

Font f =new Font("SanSerif",Font.ITALIC,16); //utworzenie czcionki o podanej nazwie, stylu i rozmiarze g.setFont(f); //przypisanie czcionki do kanwy

9. Na każdym prostokącie narysuj kolorem czarnym i czcionką f, odpowiadającą mu wygenerowaną wartość elementu tablicy t, wstawiając poniższe instrukcje na końcu pętli for:

g.setColor(Color.black);

g.drawString(t[i] + "", i * d + 10, ws - h / 2);

10. Aby grafika na ramce odświeżała się co 1 sekundę , dopisz na końcu metody paint() instrukcje:

try {

Thread.sleep(1000);//wstrzymanie wykonywania programu na 1 s } catch (InterruptedException ex) {

}

repaint();

11. Uruchom aplikację i sprawdź jej działanie.

IV.

Tworzenie grafiki z wykorzystaniem gotowych obrazów .Zastosowanie własnej metody do tworzenia obiektów graficznych

1. Utwórz nowy projekt o nazwie Projekt83 typu Java Class Library

2. Do foldera projektu skopiuj z lokalizacji wskazanej przez wykładowcę rysunki: tło.png, autobus.png, samochod.png 3. Dodaj do projektu klasę okna typu JFrame o nazwie Rysunek

4. Przejdź do kodu źródłowego klasy Rysunek

5. Pod deklaracją klasy Rysunek zadeklaruj zmienne, które będą przechowywały obrazki załadowane z dysku

Image tło, samochód, autobus;

6. W konstruktorze klasy Rysunek poniżej instrukcji initComponents() zadeklaruj początkowy rozmiar okna

setSize(800, 500);

7. Uruchom aplikację i sprawdź czy okno główne jest wyświetlane na ekranie

8. W następnych linijkach konstruktora umieść instrukcje ładujące obrazki z dysku do zmiennych zadeklarowanych w poprzednim kroku

tło = new ImageIcon("tło.jpg").getImage();

samochód = new ImageIcon("samochod.png").getImage();

autobus = new ImageIcon("autobus.png").getImage();

9. Po nawiasie kończącym kod konstruktora klasy Rysunek umieść deklarację metody odpowiedzialnej za wyświetlanie treści w obszarze okna

public void paint(Graphics g) { super.paint(g);

// umieść poniżej następne instrukcje }

10. Ważne: dalsze instrukcje umieść wewnątrz metody paint() poniżej wołania metody super.paint() 11. Pobierz do zmiennych sz i ws bieżące szerokość i wysokość okna programu

int sz = getWidth();

int ws = getHeight();

12. Wyświetl obrazek tła

g.drawImage(tło, 0, 0, this);

13. Uruchom i sprawdź czy obrazek załadował się i został wyświetlony poprawnie

14. Narysuj drogę w szarego prostokąta wypełnionego szarym kolorem (asfalt) oraz krawędziami w kolorze czarnym

int szer_drogi = 100;

g.setColor(Color.GRAY);

g.fillRect(0, 400, sz, szer_drogi);

g.setColor(Color.BLACK);

g.drawLine(0, 400, sz, 400);

g.drawLine(0, 400+szer_drogi, sz, 400+szer_drogi);

15. Narysuj przejście dla pieszych w postaci prostokątów wypełnionych kolorem białym

g.setColor(Color.WHITE);

for(int i=0; i<6; i++) {

g.fillRect(250 - i*10, 400 + i * szer_drogi/6, 80, 8);

}

16. Umieść na drodze samochód i autobus. Zwróć uwagę na sposób wyświetlania: samochód jest wyświetlany w skali 1:1, autobus jest skalowany.

g.drawImage(samochód, 0, 400, this);

g.drawImage(autobus, 420, 380, 240, 80, this);

17. W lewym górnym roku okna narysuj słońce jako kompozycję koła wypełnionego kolorem żółtym oraz kilkunastu wycinków koła (promyki) w kolorze pomarańczowym

int xs = 30, ys = 40;

g.setColor(Color.YELLOW);

for(int i=0; i<18; i++) {

g.fillArc(xs-60, ys-60, 120, 120, i * 360 / 18, 360/18 - 10);

}

g.setColor(Color.ORANGE);

g.fillOval(xs-20, ys-20, 40, 40);

18. Uruchom aplikację i porównaj z widokiem wzorcowym

19. Poza nawiasem zamykającym metodę paint() zadeklaruj metodę, za pomocą której narysujemy budynki. Metoda przyjmuje jako parametry wejściowe kolor tła budynku, jego pozycję (x,y), wymary (szer, wys) oraz kontekst graficzny Graphics:

private void rysujBudynek(Color k, int x, int y, int szer, int wys, Graphics g) {

}

20. Dalsze instrukcje umieść wewnątrz metody rysujBudynek 21. Wypełnij kolorem tła całą powierzchnie „budynku”

g.setColor(k);

g.fillRect(x, y, szer, wys);

22. Narysuj krawędzie w kolorze czarnym

g.setColor(Color.BLACK);

g.drawRect(x, y, szer, wys);

23. Wybierz jasnoniebieski kolor dla rysowania okien w budynku

g.setColor(new Color(206,248, 255));

24. Zdefiniuj dwie zmienne pomocnicze przechowujące rozmiary okna

int szer_okna = szer/2;

int wys_okna = wys/5;

25. Za pomocą podwójnej pętli FOR (piętra i klatki budynku) narysuj wszystkie okna budynku

for(int i=0; i<5; i++) { // piętra for(int j=0; j<2; j++) {

g.fillRoundRect(x + j*szer_okna + 5, y + i*wys_okna + 5, szer_okna-10, wys_okna-10, 5, 5);

} }

26. Sprawdź czy program się kompiluje i popraw ewentualne błędy

27. Wróć do metody paint() i umieść na jej końcu instrukcje rysujące trzy budynki w różnych kolorach

rysujBudynek(Color.MAGENTA, 300, 200, 80, 180, g);

rysujBudynek(Color.GREEN, 400, 170, 90, 200, g);

rysujBudynek(Color.YELLOW, 550, 240, 60, 120, g);

28. Zademonstruj działanie programu wykładowcy

Zadania do samodzielnego wykonania

1. W Projekcie 83 uzupełnij obraz graficzny w następujący sposób:

a) Dodaj jeszcze kilka budynków o różnych wymiarach oraz w innym kolorze b) Znajdź w sieci znak drogowy „przejście dla pieszych” i umieść go obok przejścia c) Następnie umieść figurkę pieszego na przejściu

d) Narysuj pojedynczą ciągłą linię w postaci prostokąta o wysokości 10 pikseli umieszczonego pośrodku jezdni

2. Utwórz aplikację na bazie klasy JFrame z pakietu Swing. Ustal rozmiar okna na 400 × 300. W metodzie paint() tej klasy wpisz instrukcje rysowania koperty.

Koperta w kolorze zielonym i dowolnych rozmiarach ma być umieszczona pośrodku ramki na żółtym tle. Pod kopertą umieść napis ze swoim

nazwiskiem i imieniem.

3. Utwórz projekt na bazie klasy JFrame z pakietu Swing , klasę główną nazwij

Powitanie. Utwórz metodę paint () tej klasy, wpisz w niej instrukcje tworzące poniższy rysunek:

Na środku ramki ma być widoczny czerwony napis wyświetlony pogrubioną czcionką MONOSPACED 20 pt.

Uwaga: Zadeklaruj obiekt klasy Font i utwórz go z użyciem konstruktora new Font("MONOSPACED",Font.BOLD,20);

Aby narysować lokomotywę, utwórz i narysuj obiekt klasy Polygon. Wykorzystaj poniższe tablice zawierające współrzędne wierzchołków wielokąta:

int[] x = {0, 35, 35, 50, 45, 60, 55, 75, 75, 70, 75, 70, 55, 50, 55, 45, 50, 45, 30, 25, 30, 20, 25, 20, 5, 0, 5, 0};

int[] y = {0, 0, 25, 25, 0, 0, 25, 25, 55, 55, 65, 75, 75, 65, 55, 55, 65, 75, 75, 65, 55, 55, 65, 75, 75, 65, 55, 55};

Odpowiednio przesuń wielobok za pomocą metody translate(). Ustal dowolny rozmiar ramki i kolor tła 4. Utwórz projekt na bazie klasy JFrame z pakietu Swing. Ustal

rozmiar jego okna na 300 × 200. Wyświetl na środku ramki 5

prostokątów pokolorowanych pięcioma odcieniami koloru zielonego, tak jak na rysunku obok

.

5.

Utwórz nowy projekt i wykorzystując poznane metody

graficzne narysuj na ramce dowolny obrazek składający się z kilku

różnokolorowych figur i napisów.