Uruchom aplikację.

Laboratorium z informatyki sem. II/ćw. 11 Wydział Transportu PW - 2020/21

Materiały do użytku wewnętrznego strona 1

I

Ć

11 I. Tworzenie aplikacji graficznej z wykorzystaniem interfejsu myszy

1. Utwórz projekt na bazie klasy ^JFrame z pakietu ^Swing o nazwie ^Projekt11a, z klasą główną Mysz.Jako tytuł ramki wpisz Grafika z wykorzystaniem myszy

.

2. W klasie Mysz zadeklaruj i utwórz pole o nazwie kolor klasy Color przypisując mu początkowo kolor biały:

Color kolor = Color.pink;

3. W klasie Mysz utwórz metodę graficzną paint () i napisz instrukcje rysujące na kanwie obiektu graficznego g, prostokąt o maksymalnych rozmiarach i kolorze kolor:

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

g.setColor(kolor);

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

}

Powyższa instrukcja wymaga 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. W konstruktorze klasy Myszponiżej wywołania metody initComponents() wywołaj metodę określającą rozmiary ramki

setSize(500, 500); //zmiana rozmiaru okna ramki

5.

Uruchom aplikację.

II. Interfejs MouseListener, obsługa zdarzeń dla myszy

1. Wyposaż klasę Mysz w interfejs MouseListener umożliwiający obsługę zdarzeń dla myszy; w tym celu zmień nagłówek tej klasy na następujący:

public class Mysz extends javax.swing.JFrame implements MouseListener

2. Zaimportuj interfejs MouseListener, a następnie zaimplementuj wszystkie jego abstrakcyjne metody, klikając na ikonie i wybierając odpowiednie polecenie z wyświetlanej listy.

3. Przejdź do metod obsługi zdarzeń myszy, automatycznie utworzonych na końcu klasy. Z treści każdej z tych metod usuń instrukcję wyrzucającą błąd wykonania: thrownew UnsupportedOperationException….

4. Pod nagłówkiem klasy ^Mysz

x i y,

5. W treści metody o sygnaturze public void mousePressed(MouseEvent e) wpisz instrukcje pobierające współrzędne położenia kursora myszy w obszarze ramki:

x=e.getX(); y=e.getY();

6. Aby po każdym naciśnięciu myszy grafika rysowana w metodzie paint() odświeżała się, dopisz w metodzie

mousePressed() instrukcję : repaint();

7. W metodzie paint() dopisz instrukcje rysowania czerwonego koła w miejscu kliknięcia myszy (x, y) :

g.setColor(Color.red);

g.fillOval(x, y, 80, 80);

8. W konstruktorze klasy Mysz umieść instrukcję addMouseListener(this); która pozwoli obiektowi tej klasy reagować na zdarzenia na myszy:

addMouseListener(this);

9. Uruchom aplikację. Sprawdź działanie lewego prawego i środkowego przycisku myszki.

III. Rozpoznawanie zdarzenia kliknięcia prawego , lewego i środkowego klawisza myszy

dopisz deklarację trzech zmiennych logicznych

boolean prawy, lewy, środkowy; // domyślna wartość początkowa tych zmiennych to false

2. W metodzie mousePressed() , dopisz instrukcje sprawdzające, który przycisk myszy został wciśnięty, jednocześnie zmieniające wówczas wartość logiczną odpowiedniej zmiennej na true

lewy = e.getButton() == MouseEvent.BUTTON1; // wciśnięto lewy przycisk myszy środkowy = e.getButton() == MouseEvent.BUTTON2; // wciśnięto środkowy przycisk myszy prawy = e.getButton() == MouseEvent.BUTTON3; // wciśnięto prawy przycisk myszy

Laboratorium z informatyki sem. II/ćw. 11 Wydział Transportu PW - 2020/21

Materiały do użytku wewnętrznego strona 2

3. Aby koło rysowało się tylko na kliknięcie lewego przycisku myszy, dopisz w odpowiednim miejscu metody paint ()

instrukcję warunkową if , sprawdzającą wartość zmiennej logicznej lewy:

if (lewy) { // tu instrukcje ustawiające kolor i rysująca koło }

4. Uruchom aplikację i sprawdź działanie lewego przycisku myszy.

5. Samodzielnie dopisz instrukcje, które na kliknięcie prawego lub środkowego przycisku myszy rysują w punkcie (x, y) odpowiednio kwadrat o boku ⁸⁰ lub wycinek koła o promieniu ⁴⁰ i kącie środkowym ⁴⁵ stopni. Ustal różne kolory figur.

6.

Uruchom aplikację i sprawdź działanie wszystkich trzech przycisków myszy.

IV. Wykorzystanie klawisza <Ctrl> wraz z przyciskiem myszy – zmiana koloru tła

Random r = new Random(); // klasa Random wymaga importu

2. W metodzie mousePressed() , dopisz instrukcje , które będą zmieniać kolor tła grafiki na losowy, gdy równocześnie z wciśnięciem klawisza myszy jest użyty klawisz <Ctrl>:

if (e.isControlDown()) { //kliknięcie myszą z wciśniętym klawiszem Ctrl kolor =new Color(r.nextInt(256), r.nextInt(256), r.nextInt(256));}

3. Uruchom aplikację. Sprawdź efekt wciśnięcia klawisza <Ctrl> wraz z przyciskiem myszy.

V. Przykład animacji zmieniającej położenie grafiki z wykorzystaniem obiektu klasy Timer

1. Utwórz projekt na bazie klasy JFrame z pakietu ^Swing, nadaj mu nazwę Projekt11b, a klasie głównej nazwę

Skoczek

. Jako tytuł ramki wpisz

2. W menu podręcznym ramki w poleceniuSet Layout

wybierz opcję

.

3.

W konstruktorze klasy

wywołaj metodę określająca rozmiary ramki oraz kolor tła wykorzystywanego przez metodę graficzną

:

setSize(500, 500);

setBackground(Color.white);

4. Zadeklaruj pod nagłówkiem klasy Skoczek pole kolor klasy Color z wartością początkową Color.yellow oraz pola

x i y typu int z początkowymi wartościami odpowiednio 0 i 30 , które posłużą do zmiany położenia tworzonej w następnym punkcie grafiki.

5. W klasie Skoczek zadeklaruj metodę paint (), której instrukcje rysują kolorowy „uśmiech”:

public void paint (Graphics g){

super.paint(g);

g.clearRect(0, 0, getWidth(), getHeight()); //wypełnienie obszaru grafiki tłem g.translate(x, y); //przesunięcie obszaru grafiki

g.setColor(kolor);

g.fillOval(0, 0, 50, 50);

g.setColor(Color.black);

g.fillOval(10, 15, 6, 6); // oczy g.fillOval(35, 15, 6, 6);

g.drawArc(10, 10, 30, 30, -140, 110); // uśmiech }

6. Uruchom aplikację.

7. W klasie głównej Skoczek zadeklaruj pole generatora liczb losowych:

Random r = new Random();

8. W klasie Skoczek zaimplementuj interfejs ActionListener - przed nawiasem rozpoczynającym definicję klasy

Soczek dopisz: implements ActionListener

9. Zaimportuj ten interfejs, a następnie lewym przyciskiem myszy kliknij ikonę żarówki po lewej stronie nagłówka klasy Skoczek i wybierz polecenie Implement all abstract metods. Zostanie wygenerowana metoda

actionPerformed(), która automatycznie będzie się wykonywała, co czas określony przez obiekt klasy Timer (obiekt ten zostanie utworzony w punkcie 10)

10. Przejdź do wygenerowanej metody actionPerformed(), usuń instrukcję wyrzucającą błąd wykonania: thrownew UnsupportedOperationException, a następnie wpisz treść metody która losowo zmienia wartości współrzędnych ^x,

y oraz pola ^kolor, a na końcu przemalowuje” ramkę metodą repaint():

x = r.nextInt(getWidth() - 60);

y = 30+r.nextInt(getHeight() - 80);

kolor = new Color(r.nextInt(256), r.nextInt(256), r.nextInt(256));

repaint();

Laboratorium z informatyki sem. II/ćw. 11 Wydział Transportu PW - 2020/21

Materiały do użytku wewnętrznego strona 3

11. W klasie Skoczek , pod jej nagłówkiem, zadeklaruj pole timer klasy Timer , posłuży ono do generowania zdarzeń w stałych odstępach czasu; zaimportuj klasę javax.swing.Timer, wybierając odpowiednią klasę w dialogu Fix Imports:

Timer timer = new Timer(500, this); //zegar tykający co 500 ms

12.

W konstruktorze klasy Skoczek dopisz instrukcję, która uruchamia zegara:

timer.start(); //uruchomienie zegara

13.

Uruchom aplikację i zaobserwuj animację jako wynik obsługi zdarzeń zegara VI. Uruchamianie i zatrzymywanie animacji za pomocą myszy

1. W nagłówku klasy Soczek dopisz interfejs MouseListener. Nagłówek powinien mieć ostatecznie postać:

public class Skoczek extends javax.swing.JFrame implements ActionListener, MouseListener

2. Zaimportuj interfejs MouseListener, a następnie zaimplementuj wszystkie jego abstrakcyjne metody, klikając na ikonie i wybierając odpowiednie polecenie z wyświetlanej listy.

3. Przejdź do metod obsługi zdarzeń myszy, automatycznie utworzonych na końcu klasy. Z treści każdej z tych metod usuń instrukcję wyrzucającą błąd wykonania: thrownew UnsupportedOperationException….

4. W metodzie mousePressed() dopisz instrukcje , które będą uruchamiać zegar, gdy wciśnięty zostanie lewy przycisk myszy i zatrzymywać zegar, gdy zostanie wciśnięty przycisk prawy:

if (e.getButton() == MouseEvent.BUTTON1) { timer.start();}

if (e.getButton() == MouseEvent.BUTTON3) { timer.stop();}

5. W konstruktorze klasy Skoczek umieść instrukcję , która pozwoli obiektowi tej klasy reagować na zdarzenia myszy:

addMouseListener(this);

6.

Uruchom aplikację. Sprawdź działanie lewego i prawego przycisku myszki.

VII. Przykład animacji „poklatkowej” z wykorzystaniem obiektu klasy Timer - Obrazki

Kolejny przykład ilustruje animację polegającą na wyświetlaniu w określonych odstępach czasu obrazków - klatek filmu. Wykorzystamy 17 obrazków zapisanych w plikach T1.gif, T2.gif, … T17.gif i będziemy wyświetlać je kolejno w odstępach czasu 200 milisekund. Po wyświetleniu ostatniego obrazka „film” zostanie automatycznie powtórzony od początku. Jest to uproszczona wersja programu opublikowanego na stronie

http://download.oracle.com/javase/tutorial/uiswing/examples/components/TumbleItemProject/src/components/TumbleItem.java

1. Utwórz projekt na bazie klasy JFrame z pakietu ^Swing, nadaj mu nazwę Projekt11c, a klasie głównej nazwę

Obrazki.

Jako tytuł ramki wpisz

2.

W konstruktorze klasy

wywołaj metodę określającą rozmiary ramki oraz kolor tła wykorzystywanego przez metodę graficzną

()

setSize(400, 300);

setBackground(Color.white);

3. Pod nagłówkiem klasy Obrazki wpisz deklaracje następujących pól:

ImageIcon[] rys = new ImageIcon[17]; // tablica przechowująca obrazki – klatki filmu int nr=0; // numer wyświetlanego obrazka

4. Zaimportuj klasę ImageIcon, a do foldera projektu skopiuj 17 obrazków z foldera Duke umieszczonego w aplikacji Teams w folderze z materiałami do dzisiejszego ćwiczenia.. Folder ten można również pobrać ze strony przedmiotu.

5. W konstruktorze klasy Obrazki dopisz instrukcje czytania do tablicy rys kolejnych obrazków z plików T1.gif,

T2.gif, …T17.gif. Pliki z obrazkami są czytane za pomocą konstruktora klasy ImageIcon, umożliwiającego przeczytanie pliku graficznego GIF, JPG lub PNG.

for (int n = 0; n < 17; n++) {

rys[n] = new ImageIcon("T" + (n + 1) + ".gif");}

6. W klasie Obrazki zadeklaruj metodę paint() i wpisz w niej instrukcje rysowania obrazka o numerze nr

super.paint(g);

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

rys[nr].paintIcon(this, g, 100, 50);

7. Uruchom aplikację i obejrzyj efekt.

8. Aby automatycznie, co pewien odstęp czasu, wyświetlać sekwencyjnie kolejne obrazki, podobnie jak w p. V.8,

zaimplementuj w klasie Obrazki interfejs ActionListener.

9. Lewym przyciskiem myszy kliknij ikonę żarówki po lewej stronie nagłówka klasy Obrazki i wybierz polecenie Implement all abstract metods, tworząc w tej klasie metodę actionPerformed(),

Laboratorium z informatyki sem. II/ćw. 11 Wydział Transportu PW - 2020/21

Materiały do użytku wewnętrznego strona 4

10. Wpisz treść metody actionPerformed(), która zwiększa o jeden numer wyświetlanego obrazka, sprawdza czy wyświetlony został już ostatni obrazek, a następnie „przemalowuje” komponent:

nr++;

if (nr > 16) { nr = 0;}

repaint();

11. W klasie Obrazki zadeklaruj pole timer klasy Timer. W konstruktorze klasy Obrazki dopisz instrukcje, które tworzą i uruchamiają zegar generujący zdarzenia co 200 milisekund (por.V.11 i V. 12). Uruchom aplikację i zaobserwuj przebieg animacji.

Zadania do samodzielnego wykonania Zadania modyfikujące Projekt11a 1. Zmiana koloru wypełnienia figur.

W metodzie mousePressed(), dodaj odpowiednie instrukcje tak, aby wciśnięcie przycisku myszy na ramce z grafiką wraz z użyciem klawiszem <Shift> powodowało zmianę koloru tła koła na losowy odcień koloru czerwonego, kwadratu na losowy odcień zieleni i wycinka na losowy odcień koloru niebieskiego.

Wskazówka: W klasie głównej zadeklaruj 3 obiekty klasy Color o wartościach początkowych dotychczas używanego koloru wypełnienia rysowanych figury. Następnie postępuj analogicznie do punktu IV.2

2. Zmiana szerokości figur.

Dodaj odpowiednie instrukcje w metodzie mousePressed() tak, aby wciśnięcie lewego przycisku myszy na ramce z grafiką wraz z użyciem klawisza <Alt> powodowało zmianę szerokości rysowanych figur na losową wartość z przedziału <50 , 100>.

Zadania modyfikujące Projekt11c

3. Zmodyfikuj klasę PanelGraficzny wykorzystując inne obrazki

4. Zmodyfikuj klasę Obrazki tak, by po wyświetleniu ostatniego obrazka, wyświetlane były obrazki od końca.

Nowe zadanie

5. Opracuj aplikację wyświetlającą koło podzielone na 10 równych wycinków, których kolory zmieniają się losowo w takt przerwań generowanych przez komponent Timer. Animację można uruchomić lub zatrzymać za pomocą 2 przycisków Start

i

Wskazówka: Zatrzymanie zegara następuje po wywołaniu na jego rzecz metody stop();