Question

我有一个节点的通用边框，我想在JavaFX中使边框看起来像这个图像（CSS和代码方式）：

有人能帮助我吗？

提前致谢

Answer 1

您应该使用box-shadow添加带有border和border-radius的柔和圆形效果。

border: 1px solid #888888;
box-shadow: 1px 1px 2px #888888;
border-radius: 25px;

Answer 2

舞台的主要类

public class SpiderMan extends Application {

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

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

    Pane batman = loader.load();

    stage.setTitle("Where's Spider man Round image?");
    stage.setScene(new Scene(batman));
    stage.show();
}

}

圆形图像类视图

 class clipRound {
    @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); the radius Arch
        clip.setArcHeight(20); the radius Arch
        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);
    }
}

圆形图像FXML视图＆＃34; SpiderMan.fxml＆＃34;

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

快照： snapshot programme is running

如何在JavaFX中实现边框的柔和圆效果

2 个答案: