如何使圖像倒圓

Question

我想讓scrollpane上的圖像查看形狀圓潤..我添加一個imageview和一個按鈕到Vbox.Then vbox到gridpane.Gridpane添加到滾動窗格。

這裏是我的屏幕截圖
這裏是我的代碼

  File file = new File("D:\\SERVER\\Server Content\\Apps\\icons"); 
      File[] filelist1 = file.listFiles(); 
      ArrayList<File> filelist2 = new ArrayList<>(); 

      for (File file1 : filelist1) { 
       filelist2.add(file1); 

      } 
      btnar = new ArrayList<>(); 
      for (int i = 0; i < filelist2.size(); i++) { 
       downloadbtn = new Button("Download"); 
       btnar.add(downloadbtn); 
      } 

      System.out.println(filelist2.size()); 
      gridpane.setAlignment(Pos.CENTER); 
      gridpane.setPadding(new Insets(20, 20, 20,20)); 

      gridpane.setHgap(20); 
      gridpane.setVgap(20); 

      ColumnConstraints columnConstraints = new ColumnConstraints(); 
      columnConstraints.setFillWidth(true); 
      columnConstraints.setHgrow(Priority.ALWAYS); 
      gridpane.getColumnConstraints().add(columnConstraints); 

      int imageCol = 0; 
      int imageRow = 0; 

      for (int i = 0; i < filelist2.size(); i++) { 
       System.out.println(filelist2.get(i).getName()); 

       image = new Image(filelist2.get(i).toURI().toString()); 

       pic = new ImageView(); 
       pic.setFitWidth(130); 
       pic.setFitHeight(130); 

       pic.setImage(image); 
       vb = new VBox(); 
       vb.getChildren().addAll(pic, (Button)btnar.get(i)); 

       gridpane.add(vb, imageCol, imageRow); 
       GridPane.setMargin(pic, new Insets(2, 2, 2, 2)); 
       imageCol++; 

       // To check if all the 3 images of a row are completed 
       if (imageCol > 2) { 
        // Reset Column 
        imageCol = 0; 
        // Next Row 
        imageRow++; 

       } 

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> 

Cre dits：https://stackoverflow.com/users/1155209/jewelsea