当鼠标悬停在 JavaFX 中的按钮上时如何创建节点（圆）？

Question

我有一个 FXML 文件，还有一个 CSS 文件和一个 Controller.java 文件。当鼠标悬停在 FXML 文件中的按钮上时，

例如fx:id="load"

如何在舞台上创建圆形节点？

我目前正在这样做：

注意：FXML 和 Controller 是链接的，所有导入都已计算在内。

// FXML:

<Button fx:id="load" layoutX="146.0" layoutY="307.0" mnemonicParsing="false"\
onMouseEntered="#hoverEnterLoad" onMouseExited="#hoverExitLoad"\
prefHeight="26.0" prefWidth="93.0" stylesheets="@title.css" />

// Controller:

public Controller {

    @FXML private Button load;
    private Circle choose = new Circle(210.0, 278.0, 15.0, Color.TRANSPARENT);

    /**                                                                                                                                                                              
     * Shows circle                                                                                                                                                                
     */
    @FXML void hoverEnterLoad(ActionEvent event) {
        choose.setCenterX(210.0);
        choose.setCenterY(278.0);
        choose.setFill(Color.BLACK);
        choose.setRadius(15.0);
    } // hoverEnterLoad                                                                                                                                                               

    /**                                                                                                                                                                              
     * Hides circle                                                                                                                                                                
     */
    @FXML void hoverExitLoad(ActionEvent event) {
        choose.setFill(Color.TRANSPARENT);
    } // hoverExitLoad

} // Controller

Answer 1

我想通了。

在 FXML 中添加一个透明的 Circle 并通过 Controller.java 编辑它而不是创建一个新的。

// FXML:
// Added:

<Circle fx:id="selector" centerX="255.0" centerY="291.0" fill="TRANSPARENT" radius="5.0" stroke="TRANSPARENT" strokeType="INSIDE" />

// Controller:
// Added/Updated:

public Controller {

    @FXML private Button load;
    @FXML private Circle choose;

    /**                                                                                                                                                                              
     * Shows circle                                                                                                                                                                
     */
    @FXML void hoverEnterLoad(ActionEvent event) {
        choose.setCenterX(210.0);
        choose.setCenterY(278.0);
        choose.setFill(Color.BLACK);
        choose.setRadius(15.0);
    } // hoverEnterLoad                                                                                                                                                               

    /**                                                                                                                                                                              
     * Hides circle                                                                                                                                                                
     */
    @FXML void hoverExitLoad(ActionEvent event) {
        choose.setFill(Color.TRANSPARENT);
    } // hoverExitLoad

} // Controller

Answer 2

您完全可以在 FXML 中执行此操作：

<Button fx:id="load" layoutX="146.0" layoutY="307.0" mnemonicParsing="false"\
onMouseEntered="#hoverEnterLoad" onMouseExited="#hoverExitLoad"\
prefHeight="26.0" prefWidth="93.0" stylesheets="@title.css" />
<Circle fx:id="selector" centerX="255.0" centerY="291.0" fill="BLACK" radius="5.0" stroke="TRANSPARENT" strokeType="INSIDE" visible="${load.hover}" />

Answer 3

为什么不直接使用 Button 的给定 hoverProperty？

circle.visibleProperty().bind(button.hoverProperty());

Answer 4

这可能更好。特别是如果你要添加大量的圈子。

public class FXMLDocumentController implements Initializable {

    @FXML private AnchorPane apMain;
    @FXML private Button load;
    Circle choose;




    @FXML void hoverEnterLoad(MouseEvent event) {
        choose = new Circle();
        choose.setCenterX(50.0);
        choose.setCenterY(50.0);
        choose.setFill(Color.BLACK);
        choose.setRadius(15.0);
        apMain.getChildren().add(choose);
        System.out.println("Mouse over button!");
    } // hoverEnterLoad                                                                                                                                                               

    /**                                                                                                                                                                              
     * Hides circle                                                                                                                                                                
     */
    @FXML void hoverExitLoad(MouseEvent event) {
        apMain.getChildren().remove(choose);
        System.out.println("Mouse no longer over!");
    } // hoverExitLoad

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    

}

当鼠标悬停在 JavaFX 中的按钮上时如何创建节点（圆）？

How to create a node (Circle) while the mouse is hovering over a button in JavaFX?

java

controller

javafx

fxml

javafx-8