Drag a Drop v JavaFX – krok za krokem průvodce pro začátečníky

Jestli jsi se někdy ptal, jak je Drag a Drop realizováno v grafickém rozhraní? Tento koncept není rozšířený pouze v moderních aplikacích, ale také je zásadní pro uživatelskou zkušenost. V této příručce ti ukážu, jak implementovat Drag a Drop v JavaFX, když vytvoříme dvě čtverce, které můžeš přesunout. Bude to krok-za-krokem návod, takže budeš moci snadno sledovat všechny potřebné kroky.

Hlavní zjištění

• Drag a Drop umožňuje uživatelům snadno přesouvat objekty.
• Implementace Drag a Drop v JavaFX je jednoduchá pomocí zpracovatelů událostí a lambda výrazů.
• Detekce kolize je zásadní pro určení, zda byl objekt umístěn v určité oblasti.

Návod krok za krokem

1. Nastavení projektu

Nejprve vytvoříš nový JavaFX projekt ve své vývojové prostředí. Ujisti se, že jsou zahrnuty všechny potřebné knihovny. Začneme základním nastavením tvé aplikace tím, že vytvoříš hlavní třídu.

2. Vytvoř uživatelské rozhraní

Pro náš příklad vytvoříme dva čtverce: jeden malý, který chceme přesunout, a jeden velký, který bude sloužit jako cíl. Kód pro to vypadá následovně:

Rectangle recToMove = new Rectangle(50, 50, 50, 50); // malý čtverec
Rectangle recTarget = new Rectangle(150, 150, 100, 100); // velký čtverec

Při vytváření čtverců určíš jejich pozici a velikost.

3. Nastav pozici a scénu

Dalším krokem potřebuješ proměnné pro uchování pozice svých objektů. Definuj souřadnice X a Y scény. Ty budou později použity pro sledování pohybu během procesu Drag-and-Drop.

double mainX, mainY; 

4. Přidej zpracovatele událostí

Dalším krokem je přidání zpracovatelů událostí, které umožní funkcionalitu Drag-and-Drop. Začneme se zpracovatelem pro stisknutí tlačítka myši.

recToMove.setOnMousePressed(event -> { mainX = event.getSceneX(); mainY = event.getSceneY();
});

Zde ukládáš aktuální pozici myši, když je tlačítko myši stisknuto.

5. Implementuj zpracovatele pro táhnutí

Pro fázi táhnutí použijeme další zpracovatele událostí, který ti umožní pohybovat čtvercem, zatímco držíš stisknuté tlačítko myši.

Při tom aktualizuješ pozici čtverce na základě aktuálního pohybu myši.

6. Uvolnění tlačítka myši

Abychom zohlednili uvolnění tlačítka myši, přidej další zpracovatele. Ten změní barvu čtverce a zkontroluje, zda je umístěn na určité cílové pozici.

recToMove.setOnMouseReleased(event -> { // Resetování barvy recToMove.setFill(Color.BLACK); checkBounce(recToMove);
});

7. Detekce kolize

Abychom zjistili, zda byl přesunutý čtverec umístěn do cílového čtverce, implementuješ metodu nazvanou checkBounce.

Zde zjistíš, zda se oba čtverce překrývají a změníš barvu cílového čtverce podle toho.

8. Přidej objekty do scény

Na závěr přidáš vytvořené čtverce do své scény a nastavíš scénu na plátno.

Souhrn – Drag a Drop s JavaFX

V této příručce jsi se naučil, jak implementovat jednoduchý systém Drag-and-Drop v JavaFX. Seznámil jsi se se základy detekce kolizí a zpracováním událostí myši. Funkcionalita Drag-and-Drop je pro uživatelskou přívětivost tvých aplikací zásadní.