4

Como os comento, intento hacer imágenes redondeadas en javafx con ImageView o incluso lo intente con label y panel, pero la propiedades css como las tengo en mi código no me funcionan en ninguno de los componentes.

Este es el código CSS que intente usar para el label o el panel, pero como podréis imaginar la imagen no se redondea.

.imgRedonda{
    -fx-background-image: url("imagen.png");
    -fx-background-radius: 100;
    -fx-background-repeat: no-repeat;
    -fx-background-size: contain;
}

El problema radica en que tampoco con imageview puedo usar -fx-background-radius: 100;

Aquí os dejo una imagen de la interfaz que quiero realizar para que veáis como tendría que quedar las imágenes con bordes redondeados: Diseño de interfaz

2 respuestas 2

1

Según esta respuesta en inglés podrias usar ImgePattern

con algo tan simple como

Circle cir2 = new Circle(250,200,80);
cir2.setFill(new ImagePattern(Image));

aplicación corriendo

public void start(Stage primaryStage) {
    try {
        BorderPane root = new BorderPane();
        root.setPadding(new Insets(10));
        Scene scene = new Scene(root,400,400);
        Label l = new Label("SHAPE IMAGE OF MY SISTER");
        l.setFont(Font.font(Font.getFontNames().get(23), FontWeight.EXTRA_BOLD, 14));
        l.setAlignment(Pos.CENTER);
        l.setPrefWidth(Double.MAX_VALUE);
        root.setTop(l);
        ///////////////el código chido empieza acá
        Circle cir2 = new Circle(250,250,120);
        cir2.setStroke(Color.SEAGREEN);
        Image im = new Image("https://juicylinksmag.files.wordpress.com/2016/02/juliet-ibrahim.jpg",false);
        cir2.setFill(new ImagePattern(im));
        cir2.setEffect(new DropShadow(+25d, 0d, +2d, Color.DARKSEAGREEN));
        //////////////acá termina el código importante
        root.setCenter(cir2);
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch(Exception e) {
        e.printStackTrace();
    }
}
0

enmascarar un nodo imageView con otro que extienda la clase shape

Como ImageView hereda la clase Node , esta puede usar un nodo como máscara (clip ). En este caso Circle que es un tipo Shape . Dado que imageView tiene alto y ancho fijo de 300 px ; el clip debe transladarse en x e y 150 px para estar en el centro . Esta es una aplicación javafx en una sola clase que puede probar .

App.java

public class App extends Application {

@Override
public void start(Stage stage) {

    ImageView imageView = new ImageView("https://ioppublishing.org/wp-content/uploads/2017/03/cat-web-cc0.jpg");
    var clip = new Circle(150);
    clip.setTranslateX(150);
    clip.setTranslateY(150);
    imageView.setClip(clip);
    imageView.setFitHeight(300);
    imageView.setFitWidth(300);

    var scene = new Scene(new StackPane(imageView), 400, 300);

    stage.setScene(scene);
    stage.setTitle("clipping ");
    stage.show();

}

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

}

Resultado :

clipping javafx

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.