Swing Bild zeichnen wenn Maus an bestimmter Position ist

[wessi86]

Hallo,
ich schreibe grad ein kleines Dartprogramm, welches durch klicks auf eine virtuelle Dartscheibe die Punkte von Spielern errechnen soll.

Das Erfassen der Mausposition mittels MouseListener und MouseMotionListener klappt schonmal einwandfrei. Jetzt möchte ich aber einen Mouse-over-effekt bei den einzelnen Feldern haben, und das will nicht so richtig.
Das ganze läuft über einen Thread in einem JFrame, gezeichnet wird auf ein JPanel. Die Klassen sind gemäß dem MVC-Konzept ausgelagert. Hier sind mal ein paar Zeilen Code:

Das Frame

@Override
    public void mouseMoved(MouseEvent e) {
        double x = Math.abs((e.getX() - 804));
        double y = Math.abs((e.getY() - 387));

        double length = Math.hypot(x, y);
        double angle = (Math.cos((100 * (e.getY() - 387)) / (100 * length))) * 10;

        //Hover
        //20
        if (length >= 146 && length < 310 && (e.getX() >= 804 && e.getY() <= 387 && length < 310 && length > 90)) {
            content.setSource("20.png");
            System.out.println(content.getSource());
        }
    }

Das JPanel:

/**
     * Variablen für die Doppelpufferung.
     */
    private Image dbImage;
    private Graphics dbg;
    int a = 0;

    private Image background;
    private String source = "clear.png";
    private Image hover;
    
    
    
    public void loadPics() {
        hover = Toolkit.getDefaultToolkit().getImage("src/pics/" + source);
        background = Toolkit.getDefaultToolkit().getImage("src/pics/boardBig.png");
    }
    
    public void setSource(String src) {
        source = src;
    }
    
    public String getSource() {
        return source;
    }

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        loadPics();
        g.drawImage(background, 0, 0, this);
        g.drawImage(hover, 0, 0, this);
    }

Also im Prinzip war es meine Idee, den Pfad des Images "hover" zu ändern, sobald die Maus auf ein entsprechendes Feld gelangt, ansonsten soll ein durchsichtiges Image "clear.png" gezeichnet werden. Eine Vermutung ist, dass irgendetwas mit der paintComponent-Methode nicht stimmt. Zum Test hab ich in dieser mal einen int hochzählen lassen, bei 40-180 war immer schluss. Ich hab jetzt schon recht lange rumprobiert und komme auf keinen grünen Zweit, vielleicht weiß ja jemand Rat.
Falls ich noch etwas an Code posten soll, oder noch Unklaheiten bestehen, einfach sagen.

mfg, Christian

 

[GUI-Programmer]

Schau dir doch mal das "Zeichnen in Swing Tutorial" an und / oder mein Frage "Zeichnen in Swing - Frage" an. Wenn nach einer der beiden Möglichkeiten immer noch ein Fehler auftritt, kannst du ja noch mal nachfragen.

Und was mich noch interessieren würde, ist, wie du den MousListener exakt den Flächen von der Dartscheibe zuordnest. (persönliches Interesse)

 

[Michael...]

Grundsätzlich sollte man die Bilder ausserhalb der paintComponent laden. Am besten die benötigten Bilder direkt im Konstruktor laden.

 

[L-ectron-X]

Hinzu kommt, dass du Bilder mit [japi]ImageIO[/japi] wesentlich effizienter laden kannst. Der u.U. benötigte Mediatracker kann dadurch entfallen.

Grafikdateien laden und anzeigen - Byte-Welt Wiki

 

[wessi86]

Danke für die vielen Antworten! Das werde ich mir nochmal genauer anschauen.

@GUI-Programmer:
Ich habe einfach dem JFrame ein MouseMotionListener hinzugefügt. Bei einem Klick wird dann die länge zum Mittelpunkt abgefragt um die einzelnen Ringe abzufragen. Dann wird der Winkel berechnet, um zu wissen, in welchem "Tortenstück" der Klick ist. Das ist recht präzise. Hier der Code:

    @Override
    public void mouseReleased(MouseEvent e) {
        //x- und y-Länge des Vektores ausrechnen (Der Mittelpunkt der Scheibe liegt bei 804, 384)
        double x = Math.abs((e.getX() - 804));
        double y = Math.abs((e.getY() - 387));

        //Gesamtlänge ausrechnen
        double length = Math.hypot(x, y);

        //Winkel zur y-Achse ausrchnen
        double angle = (Math.cos((100 * (e.getY() - 387)) / (100 * length))) * 10;

        //Überprüfen in welchem Ring der klick war
        if (length >= 262 && length < 310) {
            System.out.print("Double ");
        } else if (length >= 146 || (length > 90 && length < 108)) {
            System.out.print("Single ");
        } else if (length >= 108) {
            System.out.print("Tripple ");
        } else if (length >= 38 && length <= 90) {
            System.out.print("Bull");
        } else if (length < 90){
            System.out.print("Bulls Eye");
        }

        //Ecke oben rechts
        if (e.getX() >= 804 && e.getY() <= 387 && length < 310 && length > 90) {
            if (angle < 5.5) {
                System.out.println("20");
            } else if (angle < 6.29) {
                System.out.println("1");
            } else if (angle < 7.57) {
                System.out.println("18");
            } else if (angle < 9) {
                System.out.println("4");
            } else if (angle < 9.89) {
                System.out.println("13");
            } else if (angle >= 9.89) {
                System.out.println("6");
            }
        }

        //Ecke unten rechts
        if (e.getX() >= 804 && e.getY() > 387 && length < 310 && length > 90) {
            if (angle > 9.86) {
                System.out.println("6");
            } else if (angle > 8.96) {
                System.out.println("10");
            } else if (angle > 7.56) {
                System.out.println("15");
            } else if (angle > 6.27) {
                System.out.println("2");
            } else if (angle > 5.49) {
                System.out.println("17");
            } else if (angle <= 5.49) {
                System.out.println("3");
            }
        }
        
        //Ecke unten links
        if (e.getX() < 804 && e.getY() > 387 && length < 310 && length > 90) {
            if (angle < 5.5) {
                System.out.println("3");
            } else if (angle < 6.32) {
                System.out.println("19");
            } else if (angle < 7.61) {
                System.out.println("7");
            } else if (angle < 8.99) {
                System.out.println("16");
            } else if (angle < 9.87) {
                System.out.println("8");
            } else if (angle >= 9.87) {
                System.out.println("11");
            }
        }

        //Ecke oben links
        if (e.getX() < 804 && e.getY() < 387 && length < 310 && length > 90) {
            if (angle > 9.88) {
                System.out.println("11");
            } else if (angle > 8.99) {
                System.out.println("14");
            } else if (angle > 7.6) {
                System.out.println("9");
            } else if (angle > 6.3) {
                System.out.println("12");
            } else if (angle > 5.51) {
                System.out.println("5");
            } else if (angle <= 5.51) {
                System.out.println("20");
            }
        }
    }

Das geht bestimmt noch einfacher, aber so hat es auf anhieb funktioniert.

mfg, Christian

Edit: Ich dachte, es wäre evtl nicht so gut, gleich 82 Bilder im Konstruktor mitzuladen.