Borde-Radio y Sombra en ImageView

Nuestros programadores estrellas agotaron sus reservas de café, por su búsqueda a tiempo completo por la solución, hasta que Alina encontró el arreglo en Gitea y ahora la compartimos contigo.

Solución:

Use el siguiente css para obtener una sombra paralela:

-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 10, 0, 0, 0);

Consulte la guía de referencia de CSS de JavaFX para obtener más detalles.

Para obtener el borde además de la sombra paralela, coloque su ImageView que contiene su imagen en un StackPane. Y aplique el efecto css anterior al StackPane, además de un fondo y relleno en el StackPane.

Por ejemplo, el css a continuación aplicado al StackPane que contiene su ImageView proporcionará un borde rojo alrededor de su imagen:

-fx-padding: 10;
-fx-background-color: firebrick;

Si desea que el fondo defina su borde curvo en los bordes, use:

-fx-background-radius: 5;

Eso le da una imagen como la siguiente, donde su imagen está encerrada en un borde sombreado:

Si desea redondear la imagen en sí, es un poco más complicado. Necesitas aplicar algún código para:

1. Recorta la imagen en un rectángulo redondeado.
2. Instantánea de la imagen recortada.
3. Guarde la imagen de la instantánea en ImageView.
4. Retire el clip de ImageView.
5. Aplique el efecto de sombra paralela a ImageView.

Entonces puedes obtener algo como lo siguiente:

Algún código para ese “BatmanLost.java”:

import javafx.application.Application;
import javafx.fxml.*;
import javafx.scene.*;
import javafx.scene.effect.DropShadow;
import javafx.scene.image.*;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

import java.io.IOException;

public class BatmanLost extends Application 

    class WingClipper 
        @FXML
        private ImageView imageView;

        @FXML
        public void initialize() 
            // set a clip to apply rounded border to the original image.
            Rectangle clip = new Rectangle(
                imageView.getFitWidth(), imageView.getFitHeight()
            );
            clip.setArcWidth(20);
            clip.setArcHeight(20);
            imageView.setClip(clip);

            // snapshot the rounded image.
            SnapshotParameters parameters = new SnapshotParameters();
            parameters.setFill(Color.TRANSPARENT);
            WritableImage image = imageView.snapshot(parameters, null);

            // remove the rounding clip so that our effect can show through.
            imageView.setClip(null);

            // apply a shadow effect.
            imageView.setEffect(new DropShadow(20, Color.BLACK));

            // store the rounded image in the imageView.
            imageView.setImage(image);
        
    

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

    @Override
    public void start(Stage stage) throws IOException 
        FXMLLoader loader = new FXMLLoader(
            getClass().getResource(
                "batmanlostinthemix.fxml"
            )
        );
        loader.setController(new WingClipper());

        Pane batman = loader.load();

        stage.setTitle("Where's Batman?");
        stage.setScene(new Scene(batman));
        stage.show();
    

Con algo de FXML “batmanlostinthemix.fxml”:

Si usa la respuesta que proporcionó jewelsea, asegúrese de probar primero si se admite o no el recorte:

Platform.isSupported(ConditionalFeature.SHAPE_CLIP)

Intento evitar las funciones condicionales a menos que tenga que usarlas. En mi caso, quería hacer un cuadro redondo. Así que una alternativa sería usar un Circle en lugar de un ImageView:

Circle circle = new Circle(14);
ImagePattern pattern = new ImagePattern(myImage);
circle.setFill(pattern);

El círculo se puede mejorar para usar una sombra si es compatible:

if (Platform.isSupported(ConditionalFeature.EFFECT)) 
    circle.setEffect(new DropShadow(8, Color.rgb(0, 0, 0, 0.8)));

Gracias martin por señalar ImagePattern

Rectangle rectangle = new Rectangle(0, 0, 280, 180);
rectangle.setArcWidth(30.0);   // Corner radius
rectangle.setArcHeight(30.0);

ImagePattern pattern = new ImagePattern(
    new Image("file:images/mustang-gt.jpg", 280, 180, false, false) // Resizing
);

rectangle.setFill(pattern);
rectangle.setEffect(new DropShadow(20, Color.BLACK));  // Shadow

Tenga en cuenta que aquí estoy cambiando el tamaño de la imagen para que coincida con el tamaño del rectángulo durante su carga para garantizar la suavidad.

Recuerda que tienes autorización de decir si te fue de ayuda.

---

---

Utiliza Nuestro Buscador