Java FX Mouse over

[mugsawaay]

Hallo,

suche eine Doku oder Beispiel zu folgender Problematik.
Auf einem Gruppenphoto soll, fährt man mit der Maus über die Köpfe, oder bestimmte Stellen eines Bildes der entsprechende name angezeigt werden.

Vielen Dank

 

[Viktim]

Willst du eine Art Gesichtserkennung machen, oder Für das Foto die Namen manuell festlegen?

 

[dzim]

Also Grundsätzlich gibt es da sicher mehrere Wege die ans Ziel führen. Ich kann dir keinen Fix und fertigen Code präsentieren, aber ein paar Lösungsvorschläge machen:

Variante 1:
Zeichne dein Bild auf ein Canvas und an den stellen der Köpfe (unsichtbare) Nodes (Kreise, Rechtecke, ...).
Beispiel: http://stackoverflow.com/questions/27999430/javafx-clickable-line-on-canvas
Problem: Canvas verändert per Default nicht die Grösse. Es gab hier vor kurzem eine Frage dazu, die sich auf diesen Lösungsvorchlag hier berief: https://dlemmermann.wordpress.com/2014/04/10/javafx-tip-1-resizable-canvas/

Variante 2:
StackPane, ImageView mit dem Bild in voller Grösse drüber und weitere (unsichtbare) Nodes (Circle, ...). Dort dann gewöhnlich Tooltips drüber.
Vorteil: Kann resizen.

Grundsätzlich aber gilt: Wenn du die Grösse veränderst, musst du dich darum kümmern, das die Markierungen auch weiterhin an den richtigen Stellen im Bild bleiben - Fixe Grössen, sind da sicher hilfreich.

Wenn du noch Fragen hast: Bei der zweiten Variante könnte ich (wenn ich mal Lust habe) eventuell auch mal mit Code zu Seite stehen.

 

[dzim]

Ok. Kleines FXML-Beispiel.
Habe das "hübsche" Bild von hier verwendet, und mal damit herumgespielt:
https://de.wikipedia.org/wiki/Datei:Gruppenbild_Atelier_Elvira_(um_1894).JPG (1025x713px)

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.paint.Color?>
<?import javafx.scene.shape.Circle?>

<BorderPane xmlns:fx="http://javafx.com/fxml">

    <center>
        <StackPane>
            <ImageView fx:id="img" preserveRatio="true">
                <image>
                    <Image url="@1024px-Gruppenbild_Atelier_Elvira_(um_1894).JPG"/> 
                </image>
            </ImageView>
            <Circle fx:id="women1" radius="75" translateX="-400" translateY="-190"> 
                <fill><Color fx:constant="WHITE" /></fill>
            </Circle>
            <Circle fx:id="women2" radius="75" translateX="-200" translateY="-190"> 
                <fill><Color fx:constant="WHITE" /></fill>
            </Circle>
            <Circle fx:id="women3" radius="70" translateX="50" translateY="-220">
                <fill><Color fx:constant="WHITE" /></fill>
            </Circle>
            <Circle fx:id="women4" radius="65" translateX="180" translateY="-180">
                <fill><Color fx:constant="WHITE" /></fill>
            </Circle>
            <Circle fx:id="women5" radius="70" translateX="360" translateY="-200">
                <fill><Color fx:constant="WHITE" /></fill>
            </Circle>
        </StackPane>
    </center>
</BorderPane>

Die Kreise sollten natürlich eher Transparent sein. Eventuell mit weissem Rand, oder so.
Und man müsste ein MouseMove/-Enter/-Exit-Listener anhängen. Circle scheint normalerweise keine Tooltips zu unterstützen, daher könnte man sich dort ein weiteres Overlay vorstellen.

Oder aber: http://stackoverflow.com/questions/25338873/is-there-a-simple-way-to-display-hint-texts-in-javafx

Problem damit noch: Nicht skallierbar. Um das zu erreichen musst du die translateX/-Y an die grösse des sie umgebenen StackPanes hängen und richtig berechnen. Bei fixer Grösse aber ist das natürlich egal. Denn dann kannst du beim Festlegen der Kreis-Positionen im Code auch die Position im Node abfragen (glaub ich).

Savvy?

 

[mugsawaay]

Vielen Danke erst mal.
ich probiere es mal durch

Gü