ImageView上的邊界半徑和陰影

Question

我想在JavaFX中應用邊界半徑和陰影。

在CSS3這將是：

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

現在我想這個在JavaFX的，但即使是邊界半徑不是在JavaFX的場景生成器的工作。這裏是我的問題的截圖：

JavaFX Screenshot http://rapid-img.de/images/b92e2112.jpg

在截圖中，你可以看到，我用：

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

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。

例如下面的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> 

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