Swing #4: Usuwanie narysowanych kształtów

Zadanie

Dodaj możliwość usuwania narysowanych kształtów za pomocą prawego przycisku myszy. Dodaj także możliwość przesuwania wcześniej narysowanych kształtów.

Podpowiedź 1: Klasa MouseEvent posiada metodę getButton(), która zwraca kod wciśniętego klawisza. Są w niej również zdefiniowane odpowiednie stałe, z którymi można porównywać wynik zwrócony przez metodę getButton(), np BUTTON1 ...

Podpowiedź 2: Przy przesuwaniu elementów wykorzystaj interfejs MouseMotionListener i metodę mouseDragged().

Rozwiazanie

Na początek kod ramki, który nie zmienił się od czasu lekcji:

import java.awt.EventQueue;
import javax.swing.JFrame;

public class Frame extends JFrame {
	public Frame() {
		super("MouseTest");

		add(new MouseTestPanel());
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		pack();
		setVisible(true);
	}

	public static void main(String[] args) {
		EventQueue.invokeLater(new Runnable() {
			@Override
			public void run() {
				new Frame();
			}
		});
	}
}

a teraz kod panelu i poniżej jego wyjaśnienie.

Usuwanie kształtów:

import java.awt.*;
import java.awt.event.*;
import java.util.ArrayList;

import javax.swing.JPanel;

public class MouseTestPanel extends JPanel implements MouseListener,
		MouseMotionListener {

	private static final int WIDTH = 200;
	private static final int HEIGHT = 200;

	// punkt, który będzie pamiętał współrzędne przesuwanego kwadracika
	Point movingPoint;

	ArrayList points = new ArrayList();

	public MouseTestPanel() {
		//dodajemy słuchaczy
		addMouseListener(this);
		addMouseMotionListener(this);
		setPreferredSize(new Dimension(WIDTH, HEIGHT));
	}

	@Override
	public void mouseClicked(MouseEvent e) {
	}

	@Override
	public void mouseEntered(MouseEvent e) {
	}

	@Override
	public void mouseExited(MouseEvent e) {
	}

	@Override
	public void mousePressed(MouseEvent e) {
		// współrzędne w których kliknięto
		int x1 = e.getX();
		int y1 = e.getY();
		// współrzędne kwadracików
		int x2, y2;

		// czy chcemy dodać, usunąć, lub przesunąć
		if (e.getButton() == MouseEvent.BUTTON3) {
			Point toRemove = null;
			for (Point p : points) {
				x2 = (int) p.getX();
				y2 = (int) p.getY();
				if (x1 >= x2 && y1 >= y2 && x1 <= x2 + 10 && y1 <= y2 + 10)
					toRemove = p;
			}
			// usuwamy kwadracik
			points.remove(toRemove);
		} else if (e.getButton() != MouseEvent.BUTTON3) {
			int index = 0;
			int size = points.size();
			Point p;
			while (movingPoint == null && index < size) {
				p = points.get(index);
				x2 = (int) p.getX();
				y2 = (int) p.getY();
				if (x1 >= x2 && y1 >= y2 && x1 <= x2 + 10 && y1 <= y2 + 10)
					movingPoint = p;
				index++;
			}
		}
		//jeżeli nie kliknięto na żaden kwadracik
		if (movingPoint==null && e.getButton() == MouseEvent.BUTTON1) {
			x1 = e.getX();
			y1 = e.getY();
			// dodajemy kwadracik
			points.add(new Point(x1, y1));
		}

		repaint();
	}

	@Override
	public void mouseReleased(MouseEvent e) {
		 movingPoint = null;
	}

	@Override
	public void mouseDragged(MouseEvent e) {
		if (movingPoint != null) {
			movingPoint.x = e.getX();
			movingPoint.y = e.getY();
			repaint();
		}
	}

	@Override
	public void mouseMoved(MouseEvent e) {
	}

	@Override
	protected void paintComponent(Graphics g) {
		super.paintComponent(g); //wyczyści nasze tło
		Graphics2D g2d = (Graphics2D) g;
		g2d.setColor(Color.WHITE); //ustawiamy tło
		g2d.fillRect(0, 0, WIDTH, HEIGHT);
		g2d.setColor(Color.BLACK); //ustawiamy kolor kwadracików
		drawRectangles(g2d);
	}

	//metoda rysująca kwadraciki
	private void drawRectangles(Graphics2D g2d) {
		int x, y;
		for (Point p : points) {
			x = (int) p.getX();
			y = (int) p.getY();
			g2d.fillRect(x, y, 10, 10);
		}
	}
}

Zgodnie z podpowiedzią najpierw musimy rozpoznać, czy użytkownik chce narysować, czy usunąć jakiś kwadracik z planszy. W tym celu musimy dodać warunek sprawdzający, który przycisk myszy został wciśnięty. Informacja taka znajduje się w obiekcie MouseEvent przekazywanego do każdej z metod obsługi myszy, a dostać się do niej możemy wywołując na rzecz obiektu metodę getButton(). Zwróci nam ona jakąś liczbę typu całkowitego, nie musimy się martwić, czy będzie to 1, 5, czy 500, ponieważ klasa MouseEvent posiada również specjalnie do tego zdefiniowane stałe BUTTON1, BUTTON2, BUTTON3, dopiero przy większej liczbie przycisków robi się problem.

Ja używam myszy z trzema przyciskami, którym od lewej do prawej można nadać numery 1, 2, 3. Ponieważ usuwanie miało zachodzić po kliknięciu prawym przyciskiem sprawdzam, czy wciśnięty przycisk to BUTTON3.

Samo usunięcie jest dosyć proste. W liście przechowujemy dane lewego górnego wierzchołka każdego narysowanego kształtu. Należy więc wyszukać ten z nich, który spełnia iloczyn logiczny czterech warunków (wszystkie 4 warunki muszą zachodzić):

• 1,2 - współrzędna X miejsca w którym kliknięto musi być większa od współrzędnej X lewego górnego punktu kwadratu, i mniejsza od tej wartości powiększonej o 10

• 3,4 - analogicznie, jak w przypadku X (należy pamiętać, że współrzędne Y rosną w dół (lewy górny róg ekranu to punkt (0, 0)

Znaleziony punkt usuwamy następnie z kolekcji i odświeżamy panel przy pomocy repaint().

Przesuwanie kształtów:

Przesuwanie kształtów jest nieco bardziej skomplikowane. Podobnie jak w przypadku usuwania, musimy najpierw sprawdzić, czy w ogóle wciśnięto klawisz(inny niż prawy) na jakimś kwadraciku. Ponieważ, chcemy później aktualizować jego położenie w metodzie mouseDragged() zaimplementowanej na rzecz interfejsu MouseMotionListener, to jeżeli taki znajdziemy, przypisujemy wartość jego referencji do globalnie utworzonej zmiennej movingPoint. Dodatkowo za każdym razem przy zwolnieniu przycisku myszy przypisujemy do tej zmiennej wartość null (spróbuj usunąć tę linię kodu i zobacz, na czym polega błąd).

Poruszanie kształtu obsługujemy w metodzie mouseDragged(), która przypomnijmy - jest wykonywana, gdy użytkownik wciśnie klawisz na komponencie i porusza kursorem. Ponieważ my posiadamy zmienną movingPoint, w której pamiętamy, który punkt chcemy przesuwać, wystarczy zmieniać jego współrzędne wraz z poruszaniem kursora. Ja zrobiłem to po prostu przypisując wartości położenia kursora bezpośredni do pól movingPoint.x, oraz movingPoint.y. Można jednak do tego wykorzystać równie dobrze metodę setLocation klasy Point. Po każdym malutkim przesunięciu myszy należy oczywiście także odświeżyć panel.

Dla osoby, która rozpoczyna zabawę z obsługą zdarzeń może się to niewątpliwie wydawać nieco zagmatwane i skomplikowane. Warto jednak dokładnie przejrzeć przykład i zrozumieć co się w nim dzieje. Dobrze jest również wymyślić sobie kilka podobnych przykładów i po prostu je zrobić.