Come posso centrare una vista immagine in un pannello di ancoraggio?
-
21-12-2019 - |
Domanda
Sto usando la scena costruttore per creare la mia GUI e sto visualizzando Image
s mentre gli utenti selezionano gli elementi in un elenco.I Image
s sono di dimensioni diverse e quando un Image
più piccolo del riquadro è in entrata, l'immagine viene visualizzata nella parte superiore sinistra del riquadro.Come vai a prendere il ImageView
e / o Image
da visualizzare nel centro del Pane
?
Ho guardato in tutta la Javafx ImageView e Apis di Image ma non ho trovato molto per centrare il ImageView
in a Pane
.Non ho mai visto nulla nel costruttore di scena, neanche io.Di solito nel costruttore di scena, se c'è un modo per centrare un nodo, ci sarà un'opzione per il centraggio.
Soluzione
In qualsiasi tipo di riquadro è ora possibile impostare l'allineamento dell'immagine in posizione specifica. Per questo è possibile utilizzare Prova HBox
Quando si inserisce un Image
nel HBox
, inizialmente è mostrato come di seguito.
Ora imposta la proprietà di allineamento del HBox
Ora cambia l'allineamento per centrare e vedere l'output
Spero che il suo lavoro per te
È anche possibile farlo a farlo a livello programmatico in un Pane
tramite immagine get
Prova questo
AnchorPane anchorPane = new AnchorPane();
Image img = new Image(getClass().getResourceAsStream("Edit-Male-User-icon.png"));
ImageView imageView = new ImageView(img);
anch.getChildren().add(imageView );
ImageView app = (ImageView) (Node) anchorPane.getChildren().get(0);
app.setX(100);
app.setY(100);
. Altri suggerimenti
Crea un Group
e scena nel metodo di avvio:
Group root = new Group();
Scene scene = new Scene(root, 551, 400, Color.BLACK);
primaryStage.setScene(scene);
.
Creare un ImageView
e impostare le seguenti proprietà:
ImageView imageView = new ImageView();
// set aspect ratio
imageView.setPreserveRatio(true);
// resize based on the scene
imageView.fitWidthProperty().bind(scene.widthProperty());
imageView.fitHeightProperty().bind(scene.heightProperty());
.
Crea un StackPane
(almeno questo è ciò che ho usato) e legare le tue proprietà:
StackPane stack = new StackPane();
stack.getChildren().add(imageView);
stack.translateXProperty()
.bind(scene.widthProperty().subtract(stack.widthProperty())
.divide(2));
stack.translateYProperty()
.bind(scene.heightProperty().subtract(stack.heightProperty())
.divide(2));
.
Aggiungi questo stack all'elemento root:
root.getChildren().add(stack);
.
Mostra primaryStage
ed esegui altri codici nel tuo metodo di avvio:
primaryStage.show();
. Un modo semplice per rendere le piccole immagini centrate dinamicamente:
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class CenterInStage extends Application {
private final String TITLE = "Center in Stage";
private final double WIDTH = 350;
private final double HEIGHT = 250;
private final String IMAGE_PATH =
"http://icons.iconarchive.com/icons/iconka/meow-2/64/cat-rascal-icon.png";
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle(TITLE);
Image image = new Image(IMAGE_PATH);
ImageView imageView = new ImageView(image);
imageView.setPreserveRatio(true);
StackPane pane = new StackPane();
pane.getChildren().add(imageView);
StackPane.setAlignment(imageView, Pos.CENTER);
Scene scene = new Scene(pane, WIDTH, HEIGHT);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
.