Povleci in spusti v JavaFX – korak za korakom vodnik za začetnike

Si se kdaj spraševal, kako se Drag in Drop realizira v grafičnem vmesniku? Ta koncept ni le razširjen v sodobnih aplikacijah, temveč je tudi izjemno pomemben za uporabniško izkušnjo. V tem priročniku ti bom pokazal, kako implementirati Drag in Drop v JavaFX, tako da ustvariva dva kvadrata, ki ju lahko premikaš. To bo korak-za-korakom vodič, tako da boš lahko enostavno sledil vsem potrebnim korakom.

Najpomembnejše ugotovitve

• Drag in Drop omogoča uporabnikom enostavno premikanje predmetov.
• Implementacija Drag in Drop v JavaFX je preprosta z uporabo obravnave dogodkov in lambda izrazov.
• Prepoznava trkov je ključna za ugotavljanje, ali je predmet postavljen znotraj določenega območja.

Vodič korak za korakom

1. Nastavitev projekta

Najprej ustvari novo JavaFX projekt v svojem razvojnem okolju. Prepričaj se, da so vključene vse potrebne knjižnice. Začnemo z osnovno nastavitvijo tvoje aplikacije, tako da ustvariš glavno klaso.

2. Ustvari uporabniški vmesnik

Za naš primer ustvarimo dva kvadrata: enega majhnega, ki ga želimo premakniti in enega velikega, ki služi kot cilj. Koda za to izgleda takole:

Rectangle recToMove = new Rectangle(50, 50, 50, 50); // majhen kvadrat
Rectangle recTarget = new Rectangle(150, 150, 100, 100); // velik kvadrat

Pri ustvarjanju kvadratov definiraš njihovo pozicijo in velikost.

3. Določitev pozicije in prizora

Naslednje potrebuješ spremenljivke za shranjevanje pozicije svojih predmetov. Določi X- in Y- koordinate prizora. Te bodo kasneje uporabljene za sledenje gibanju med procesom Drag-and-Drop.

double mainX, mainY; 

4. Dodaj obravnave dogodkov

Naslednji korak je dodati obravnave dogodkov, ki omogočajo funkcionalnost Drag-and-Drop. Začnemo z obravnavo za pritisk na miško.

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

Tukaj shraniš trenutno pozicijo miške, ko je miška pritisnjena.

5. Implementacija obravnave premikanja

Za fazo premikanja uporabimo še en obravnavatelj dogodkov, ki ti omogoča, da premikaš kvadrat, medtem ko držiš pritisnjeno miškino tipko.

Tukaj posodobiš položaj kvadrata na podlagi trenutnega gibanja miške.

6. Spustitev miške

Da upoštevaš sprostitev miškine tipke, dodaj dodatno obravnavo. Ta spremeni barvo kvadrata in preveri, ali je postavljen na določeno ciljno pozicijo.

recToMove.setOnMouseReleased(event -> { // Ponastavi barvo recToMove.setFill(Color.BLACK); checkBounce(recToMove);
});

7. Prepoznava trkov

Da preveriš, ali je premaknjeni kvadrat odložen v cilj, implementiraš metodo, imenovano checkBounce.

Tukaj ugotoviš, ali se kvadrati prekrivajo in ustrezno spremeniš barvo ciljnega kvadrata.

8. Dodajanje predmetov na prizor

Na koncu dodaš ustvarjene kvadrate na svoj prizor in nastaviš prizor na oder.

Povzetek – Drag in Drop z JavaFX

V tem priročniku si se naučil, kako implementirati preprost sistem Drag-and-Drop v JavaFX. Spoznal si osnove prepoznave trkov ter obvladovanje miških dogodkov. Funkcionalnosti Drag-and-Drop so ključnega pomena za uporabniško prijaznost tvojih aplikacij.