Kierunek Informatyka
Instrukcja do ćwiczeń laboratoryjnych nr:		10	Nazwa przedmiotu: Programowanie w języku Java
Temat: Mechanizmy graficzne w JAVA2 (SWING)				Tryb studiów: stacjonarne
				Czas trwanie ćw. 2x45 min
Autor materiałów: dr Marcin Skuba

1. Treści programowe:
Metody rysujące, kontekst urządzenia, metoda „paint”, kolory, czcionki, zdarzenia związane z obsługą myszy, interfejsy: MouseListener, MouseMotionListener.

2. Cel zajęć:

Poznanie mechanizmów graficznych dostępnych w technologii Java2.
Opanowanie umiejętności posługiwania się metodami rysującymi oraz funkcjami interfejsu związanymi z obsługą myszy.

3. Materiały

Rysowanie z użyciem klas pakietu Swing polega na przysłanianiu oryginalnej metody paintComponent rysującej poszczególne obiekty. Wygodną kasą, która może posłużyć jako płótno może być JPanel.

public void paintComponent(Graphics g){

Graphics2D g2 = (Graphics2D)g; //
}

Poniższy przykład przedstawia strukturę programu gdzie używamy narzędzi graficznych do stworzenia własnych kształtów. Program składa się z dwóch klas. Klasy ramki (JFrame) oraz zmodyfikowanej klasy panelu (JPanel).

Klasa Grafika:

import javax.swing.*;
 
public class Grafika extends JFrame {
 Grafika(){
 super("Grafika");
 setBounds(200,100,500,500);
 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 PanelGrafika panelGrafika = new PanelGrafika();
 setContentPane(panelGrafika);
 setVisible(true);
 }
 
 public static void main(String[] args) {
 new Grafika();
 }
}
 

Klasa PanelGrafika:

import javax.swing.*;
import java.awt.*;
import java.awt.geom.Ellipse2D;
import java.awt.geom.GeneralPath;

public class PanelGrafika extends JPanel {

PanelGrafika(){
setBackground(Color.YELLOW); // Ustawienie koloru tła panelu w oryginalenj metodzie paintComponent
}

public void paintComponent(Graphics g){
super.paintComponent(g); // Wywołanie oryginalnej metody paintComponent
Graphics2D g2 = (Graphics2D)g; //

g2.drawRect(100,40,100,50);// rysowanie prostokąta pustego w kolorze domuślnym (czarnym)

g2.setColor(Color.GREEN); //Ustawienie koloru pobranego ze statycznych klasy Color (pakiet awt)
g2.drawRect(270,40,100,50); //Rysowanie prostokąta pustego w kolorze ustawionym metodą setColor
g2.fillRect(100,100,100,50); //Rysowanie prostokąta wypełnionego kolorem ustawionym metodą setColor

g2.setColor(Color.YELLOW);
g2.fillOval(270,100,100,50); // Rysowanie elipsy wypełnionej kolorem

Color kolor = new Color(255,0,0); //Stworzenie obiektu kolor, gdzie jako argumenty podajemy trzy składowe RGB
g2.setColor(kolor);
g2.drawOval(100,160,100,50);// Rysowanie elipsy nie wypełnionej kolorem
g2.drawLine(10,240, 470, 240); //Rysowanie linii o współrzędnych x1, y1 oraz x2, y2

BasicStroke basicStroke = new BasicStroke(5, 1,1); // Ustawienie stylu linii (grubość, styl zakończenia, styl łączenia)
g2.setStroke(basicStroke); // Ustawienie stylu linii
g2.drawLine(10,260, 470, 260); // Rysowanie linii o parametrach ustalonych w obiekcie basicStroke

//Tworzenie obrazka Image ze źródła zasobów
Image imageIconFrame = new ImageIcon(getClass().getClassLoader().getResource("logopwsz.jpg")).getImage();
g2.drawImage(imageIconFrame, 10,300, null); // Rysowanie obrazka

g2.drawString("KPU w Krośnie", 200,300); // Rysowanie tekstu
Font font = new Font("Calibri", Font.BOLD, 30); // Tworzenie obkietu czcionki (nazwa, styl, rozmiar)
g2.setFont(font); // Ustawienie czcionki z obiektu font
g2.drawString("Java", 200,340); // Rysowanie tekstu ustawioną wcześniej czcionką

//Rysowanie elipsy za pomocą klasy Ellipse2D.Double
Ellipse2D.Double circle = new Ellipse2D.Double(300, 340, 50, 60);
g2.setColor(Color.GRAY);
g2.fill(circle);

int xPoints[] = {9, 15, 0, 18, 3}; // Współrzędne x gwiazdy
int yPoints[] = {0, 18, 6, 6, 18}; // Współrzędne y gwiazdy

g.setColor(Color.BLACK);
g.fillPolygon(xPoints, yPoints , 5); // Rysuje wielokąt wypełniając jego wnętrze aktualnym kolorem.

//Rysowanie gwiazdy jako krztałtu złożonego
GeneralPath star = new GeneralPath(); //Kształt złożony z kilku krzywych
int x=220 ,y=350;
star.moveTo(xPoints[0] + x, yPoints[0] + y);// Dodaje do ścieżki punkt o współrzędnych x, y
for (int i = 1; i < xPoints.length; i++) {
star.lineTo(xPoints[i] +x, yPoints[i] + y); // Dodaje odcinek łączący ostatni punkt ścieżki z x,y
}
star.closePath(); //Dodaje odcinek łączący ostatni punkt ścieżki z punktem określonym w ostatnim wywołaniu moveTo().

g2.setColor(Color.RED); // Dodaje odcinek łączący ostatni punkt ścieżki z punktem określonym w ostatnim wywołaniu moveTo().
g2.fill(star); // Rysuje cały złożony kształt
}

Wykorzystanie kursora myszy w programie polega na użyciu interfejsów z metodami abstrakcyjnymi, które odpowiadają za określone zdarzenia.

Metody interfejsu MouseListener:

@Override
public void mouseClicked(MouseEvent e) {
 // Metoda wywoływana gdy wciśniemy i puścimy lewy klawisz myszy w tym samym miejscu
 
@Override
public void mousePressed(MouseEvent e) {
 // Metoda wywoływana w momencie wciśnięcia klawisza myszy
}
 
@Override
public void mouseReleased(MouseEvent e) {
 // Metoda wywoływana w momencie zwolnienia klawisza myszy
}
 
@Override
public void mouseEntered(MouseEvent e) {
 // Metoda wywoływana w trakcie opuszczania kursora myszy obszaru obsługiwanego przez interfejs
}
 
@Override
public void mouseExited(MouseEvent e) {
 // Metoda wywoływana w trakcie powrotu kursora myszy w obszar obsługiwany przez interfejs 
}

Metody interfejsu MouseMotionListener:

 
@Override
public void mouseDragged(MouseEvent e) {
 // Metoda wywoływana jest gdy kursor myszy porusza się po ekranie z wciąniętym klawiszem myszy
}
 
@Override
public void mouseMoved(MouseEvent e) {
 // Metoda wywoływana jest gdy kursor myszy porusza się po ekranie 
}
 

Przykładowy program pokazujący wykorzystanie zdarzeń pochodzących od myszy komputerowej.

Klasa główna Grafika2:

import javax.swing.*;
 
public class Grafika2 extends JFrame {
 Grafika(){
 super("Grafika");
 setBounds(200,100,500,500);
 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 PanelGrafikaMouse panelGrafika = new PanelGrafikaMouse();
 setContentPane(panelGrafika);
 setVisible(true);
 }
 
 public static void main(String[] args) {
 new Grafika2();
 }
}

Klasa PanleGrafikaMouse:

import javax.swing.*;
import java.awt.*;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
 
public class PanelGrafikaMouse extends JPanel implements MouseListener, MouseMotionListener {
 
 int x=-50,y=-50;
 PanelGrafikaMouse(){
 addMouseListener(this);
 addMouseMotionListener(this);
 }


 public void paintComponent(Graphics g){
 //super.paintComponent(g);
 
 Graphics2D g2 = (Graphics2D)g;
 String tekst = "x="+x+" y="+y;
 g2.drawString(tekst,x,y);
 }
 
 @Override
 public void mouseClicked(MouseEvent e) { }
 
 @Override
 public void mousePressed(MouseEvent e) {
 x=e.getX();
  y=e.getY();
 repaint();
 }
 @Override
 public void mouseReleased(MouseEvent e) { }
 @Override
 public void mouseEntered(MouseEvent e) { }
 @Override
 public void mouseExited(MouseEvent e) { }
 @Override
 public void mouseDragged(MouseEvent e) { }
 @Override
 public void mouseMoved(MouseEvent e) { }
}

Wybór koloru z okna dialogowego JColorChooser:

Color newColor = JColorChooser.showDialog(PanelGrafikaMouse.this, "Wybierz kolor", this.getBackground());

4. Zadania

Zadanie 1
Wykorzystując funkcje rysujące oraz obsługę myszy napisz program, którego działanie opisano poniżej.

Podczas ruchu myszą z wciśniętym klawiszem w miejscu wskazanym przez wskaźnik powinien zostać ślad przypominający narzędzie graficzne jakim jest pędzel.

Zaprojektuj obsługę myszy tak aby rysowane linie były płynne bez pojedynczych śladów pędzla.

Zadanie 2
Zmodyfikuj program z zadania pierwszego, tak aby można było wybierać kolor ze standardowego okna wyboru koloru, jak na rysunku poniżej.

Dodaj własne funkcje programu graficznego.