eclipse JavaFx：如何使用场景构建器制作可点击的图像

JavaFx: how make a clickable image using scenebuilder

提问by mistletoe

I wanted to know how to make clickable image using ImageView which takes me to another FXML using scene builder. I am using eclipse IDE.

我想知道如何使用 ImageView 制作可点击的图像，它使用场景构建器将我带到另一个 FXML。我正在使用 Eclipse IDE。

回答by d.j.brown

I've never used scene builder, but you can just call setOnMouseClicked(EventHandler<MouseEvent> event)on the ImageViewobject.

我从来没有使用现场的建设者，但你可以叫setOnMouseClicked(EventHandler<MouseEvent> event)上ImageView对象。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class ImageClickExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        ImageView img = new ImageView("http://i.stack.imgur.com/oURrw.png");
        img.setPickOnBounds(true); // allows click on transparent areas
        img.setOnMouseClicked((MouseEvent e) -> {
            System.out.println("Clicked!"); // change functionality
        });
        Scene scene = new Scene(new StackPane(img));
        primaryStage.setTitle("Image Click Example");
        primaryStage.setScene(scene);
        primaryStage.sizeToScene();
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

回答by Syed.

Lets start with scenebuilder, open the fxml file. Drag-and-drop ImageView from Scenebuilder library(right panel). Once added, select the ImageView and give it a fx:id "iView" in this case, then goto Code section and add a function name in OnMouseClicked field. I named my function "LoginUser".

让我们从scenebuilder开始，打开fxml文件。从 Scenebuilder 库（右面板）拖放 ImageView。添加后，选择 ImageView 并在本例中为其指定 fx:id "iView"，然后转到代码部分并在 OnMouseClicked 字段中添加函数名称。我将我的函数命名为“LoginUser”。

:

：

Now open the controller file in eclipse IDE.

现在在 Eclipse IDE 中打开控制器文件。

define the function with @FXML tag:

用@FXML 标签定义函数：

@FXML
private boolean LoginUser() throws ClassNotFoundException {
    Stage mainStage = (Stage) iView.getScene().getWindow();

    try {
            Parent root = FXMLLoader.load(getClass().getResource("file.fxml"));
            Scene scene = new Scene(root);
            mainStage.setScene(scene);
            mainStage.setTitle("Test Window");
        }
            catch(Exception e){}
}

Load the fxml file you want to on image click.

单击图像时加载您想要的 fxml 文件。

回答by GOXR3PLUS

---

---

1)Create a Buttonor (Label) in SceneBuilder

1) 创建一个Button或 ( Label) 在SceneBuilder

2)Add an ImageViewto the Button using SceneBuilder

2) 添加一个ImageView到按钮使用SceneBuilder

Relevant question:here

相关问题：这里

3)Use CSS:

3）使用CSS：

    1)Inside the `SceneBuilder` or

    2)Using an external css file(with styleclass or with css id) as shown above i have added all the three ways(choose one :) ):

  .crazyButton{
      -fx-background-color:transparent;
      -fx-border-color:transparent;
      -fx-text-fill:transparent;    
  }

  or


  #myButton{
     -fx-background-color:transparent;
     -fx-border-color:transparent;
     -fx-text-fill:transparent;    
  }

Here you can play with the method setPickOnBounds(true/false);if you want the transparent areas of the Buttonto receive click events.

setPickOnBounds(true/false);如果您希望 的透明区域Button接收点击事件，您可以在这里使用该方法。

4)Add an ActionListeneror MouseListenerto the Buttonusing SceneBuilderor plain Java Code

4）添加ActionListener或MouseListener向Button使用SceneBuilder或纯Java Code

---

---