ImageView上的边框半径和阴影

Question

我想在JavaFX中应用边框半径和阴影。

在CSS3中，它会是这样的：

box-shadow: rgba(0,0,0,0.8) 0 0 10px;
border-radius: 3px;

现在我想在JavaFX中实现这个，但即使使用JavaFX Scene Builder，边框半径也无法工作。这是我的问题截图：

_{(来源：rapid-img.de)}

您可以在屏幕截图上看到我正在使用：

-fx-border-radius: 10 10 10 10;
-fx-background-radius: 10 10 10 10;

- Frank Roth

---

对于box-shadow，我找到了以下解决方案：-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,1), 5, 0.0, 0, 1); - Frank Roth

Answer 1

使用下面的CSS来获取一个阴影效果：

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

请参考JavaFX CSS 参考指南了解详细信息。

如果要除了投影效果外，还同时添加边框，请将包含图像的 ImageView 放置在 StackPane 中。然后将上面提到的效果css应用于 StackPane 上，并在 StackPane 上设置背景和填充。

例如，将下面的 css 应用于包含 ImageView 的 StackPane 将为图像提供红色边框：

-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>

- jewelsea

---

哇，做得好棒，谢谢你……我有点难过，因为JavaFX没有本地支持图像圆角。也许在下一个版本中会支持 =) - Frank Roth

如果您正在阅读此内容，请确保向下滚动到Sayka的答案，使用ImagePattern而不是条件图像剪辑：https://dev59.com/h2Ij5IYBdhLWcg3wOCyS#56303884 - basse

Answer 2

如果您使用jewelsea提供的答案，请确保首先测试是否支持剪辑：

Platform.isSupported(ConditionalFeature.SHAPE_CLIP)

我尽量避免使用条件特性，除非我必须使用它们。在我的情况下，我想让一张图片变成圆形。因此一个替代方案就是使用 Circle 而不是 ImageView：

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

圆形可以增加阴影效果（如果支持）：

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

- Martin Andersson

Answer 3

感谢Martin指出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

请注意，这里是在加载时调整图像的大小以匹配矩形的大小，以确保平滑。

- Abdul Saleem