Пограничный радиус и тень на ImageView

Question

Я хочу применить радиус границы и тень в JavaFX.

В CSS3 было бы:

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

Теперь я хочу это в JavaFX, но даже граница радиуса не работает в JavaFX Scene Builder. Вот скриншот моей проблемы:

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. И примените эффект css выше к StackPane, в дополнение к фону и дополнению на StackPane.

Например ниже CSS применяется к StackPane, содержащего ваш ImageView обеспечит красную рамку вокруг изображения:

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