如何在 JavaFX 中向影像新增捲軸?


捲軸包含一個拇指以及一個新增到可滾動面板的右側和左側按鈕。使用此操作,可以向上和向下滾動附加到它的面板。

在 JavaFX 中,javafx.scene.control.ScrollBar 代表一個捲軸。您可以透過例項化此類來建立一個捲軸。通常,一個捲軸與其他控制元件(如 ScrollPane、ListView 等)相關聯。

將 ScrollBar 設定為影像

名為 value 的屬性指定捲軸表示的當前值,您可以使用 addListener() 方法為此屬性新增一個偵聽器。

要將捲軸附加到影像,請執行以下操作:

  • 建立一個表示所需影像的 ImageView 物件。

  • 建立一個面板來容納影像檢視,如滾動面板、vBox 等。

  • 為捲軸的 value 屬性新增一個偵聽器。

  • 根據捲軸的方向,使用捲軸的新值的負值設定佈局面板的 X/Y 佈局。

示例

public class ScrollBarActionExample extends Application {
   public void start(Stage stage) throws FileNotFoundException {
      //Label for education
      Label label = new Label("Educational qualification:");
      Font font = Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 12);
      label.setFont(font);
      //list View for educational qualification
      ScrollBar scroll = new ScrollBar();
      scroll.setMin(0);
      scroll.setOrientation(Orientation.VERTICAL);
      scroll.setPrefHeight(200);
      scroll.setPrefWidth(20);
      //creating the image object
      InputStream stream = new FileInputStream("D:\images\elephant.jpg");
      Image image = new Image(stream);
      //Creating the image view
      ImageView imageView = new ImageView();
      //Setting image to the image view
      imageView.setImage(image);
      //Setting the image view parameters
      imageView.setX(5);
      imageView.setY(0);
      imageView.setFitWidth(595);
      imageView.setPreserveRatio(true);
      //Adding the toggle button to the pane
      VBox vBox = new VBox(5);
      vBox.getChildren().addAll(imageView);
      scroll.valueProperty().addListener((ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> {
         vBox.setLayoutY(-new_val.doubleValue());
      });
      //Setting the stage
      Group root = new Group();
      root.getChildren().addAll(vBox, scroll);
      Scene scene = new Scene(root, 595, 200, Color.BEIGE);
      stage.setTitle("Scroll Bar Example");
      stage.setScene(scene);
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

輸出

更新於: 2020 年 5 月 18 日

591 次瀏覽

開啟您的職業生涯

透過完成課程獲得認證

開始
廣告