如何使图像视图四舍五入

Question

我想让滚动窗格上的图像视图看起来是圆形的。我正在向 Vbox 添加一个图像视图和一个按钮。然后将该 vbox 添加到网格窗格。将网格窗格添加到滚动窗格。

这是我的屏幕截图
这是我的代码

           File file = new File("D:\\SERVER\\Server Content\\Apps\\icons");
            File[] filelist1 = file.listFiles();
            ArrayList<File> filelist2 = new ArrayList<>();

            for (File file1 : filelist1) {
                filelist2.add(file1);

            }
            btnar = new ArrayList<>();
            for (int i = 0; i < filelist2.size(); i++) {
                downloadbtn = new Button("Download");
                btnar.add(downloadbtn);
            }

            System.out.println(filelist2.size());
            gridpane.setAlignment(Pos.CENTER);
            gridpane.setPadding(new Insets(20, 20, 20,20));

            gridpane.setHgap(20);
            gridpane.setVgap(20);

            ColumnConstraints columnConstraints = new ColumnConstraints();
            columnConstraints.setFillWidth(true);
            columnConstraints.setHgrow(Priority.ALWAYS);
            gridpane.getColumnConstraints().add(columnConstraints);

            int imageCol = 0;
            int imageRow = 0;

            for (int i = 0; i < filelist2.size(); i++) {
                System.out.println(filelist2.get(i).getName());

                image = new Image(filelist2.get(i).toURI().toString());

                pic = new ImageView();
                pic.setFitWidth(130);
                pic.setFitHeight(130);

                pic.setImage(image);
                vb = new VBox();
                vb.getChildren().addAll(pic, (Button)btnar.get(i));

                gridpane.add(vb, imageCol, imageRow);
                GridPane.setMargin(pic, new Insets(2, 2, 2, 2));
                imageCol++;

                // To check if all the 3 images of a row are completed
                if (imageCol > 2) {
                    // Reset Column
                    imageCol = 0;
                    // Next Row
                    imageRow++;

                }

Answer 1

使用以下 css 获得投影：

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

详情请参阅JavaFX CSS Reference guide。

要获得除投影之外的边框，请将包含图像的 ImageView 放在 StackPane 中。除了 StackPane 上的背景和填充之外，还将上面的效果 css 应用到 StackPane。

例如，以下应用于包含您的 ImageView 的 StackPane 的 css 将在您的图像周围提供一个红色边框：

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

如果您希望定义边界的背景在边缘弯曲，请使用：

-fx-background-radius: 5;

这将为您提供如下图像，其中您的图像被包围在阴影边框中：

如果您想实际对图像本身进行四舍五入，那就有点棘手了。您需要将一些代码应用于：

1. 将图像剪辑成圆角矩形。
2. 对剪裁的图像进行快照。
3. 将快照图像存储回 ImageView。
4. 从 ImageView 中删除剪辑。
5. 将阴影效果应用到 ImageView。

然后你可以得到如下的东西：

“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();
    }
}

使用一些 FXML “batmanlostinthemix.fxml”：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="313.0" prefWidth="477.0" style="-fx-background-color: azure;" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <children>
    <ImageView fx:id="imageView" layoutX="29.0" layoutY="44.0" fitHeight="224.0" fitWidth="400.0" pickOnBounds="true" preserveRatio="true">
      <image>
        <Image url="http://collider.com/wp-content/uploads/lego-batman-movie-dc-super-heroes-unite-1.jpg" />
      </image>
    </ImageView>
  </children>
</AnchorPane>

致谢：https://stackoverflow.com/users/1155209/jewelsea