我想在 JavaFX 中应用边框半径和阴影。
在 CSS3 中应该是：
box-shadow: rgba(0,0,0,0.8) 0 0 10px;
border-radius: 3px;
现在我想在 JavaFX 中使用它，但即使是边界半径在 JavaFX 场景生成器中也不起作用。这是我的问题的屏幕截图：
（来源：rapid-img.de）
在截图上你可以看到我使用的是：
-fx-border-radius: 10 10 10 10;
-fx-background-radius: 10 10 10 10;
【问题讨论】：
标签： javafx
使用以下 css 获得投影：
-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 10, 0, 0, 0);
详情请参阅JavaFX CSS Reference guide。
要获得除投影之外的边框，请将包含图像的 ImageView 放在 StackPane 中。并将上面的 CSS 效果应用到 StackPane 上，以及 StackPane 上的背景和填充。
例如，以下应用于包含您的 ImageView 的 StackPane 的 css 将在您的图像周围提供一个红色边框：
-fx-padding: 10;
-fx-background-color: firebrick;
如果您希望定义边界的背景在边缘弯曲，请使用：
-fx-background-radius: 5;
这将为您提供如下图像，其中您的图像被包围在阴影边框中：
如果您想实际对图像本身进行四舍五入，那就有点棘手了。您需要将一些代码应用于：
然后你可以得到如下的东西：
“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提供的答案，那么请务必先测试是否支持裁剪：
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)));
}
【讨论】：
感谢马丁指点 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
请注意，我在这里调整图像的大小以在加载期间匹配矩形的大小，以确保平滑度。
【讨论】：