如何使ImageView四舍五入
我想使scrollpane上的imageview看起来是圆形的。我正在将imageview和按钮添加到Vbox。然后将该Vbox添加到gridpane。gridpane将添加到scrollpane 这是我的屏幕截图如何使ImageView四舍五入,image,javafx,rounded-corners,Image,Javafx,Rounded Corners,我想使scrollpane上的imageview看起来是圆形的。我正在将imageview和按钮添加到Vbox。然后将该Vbox添加到gridpane。gridpane将添加到scrollpane 这是我的屏幕截图 这是我的密码 File file = new File("D:\\SERVER\\Server Content\\Apps\\icons"); File[] filelist1 = file.listFiles();
这是我的密码
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++;
}
File File=new文件(“D:\\SERVER\\SERVER Content\\Apps\\icons”);
File[]filelist1=File.listFiles();
ArrayList filelist2=新的ArrayList();
对于(文件file1:filelist1){
filelist2.add(file1);
}
btnar=新的ArrayList();
对于(int i=0;i2){
//重置列
imageCol=0;
//下一排
imageRow++;
}
使用以下css获得阴影:
-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 10, 0, 0, 0);
有关详细信息,请参阅
要获得阴影之外的边框,请将包含图像的ImageView放置在StackPane中。除了StackPane上的背景和填充之外,还要将上面的效果css应用于StackPane
例如,下面应用于包含ImageView的StackPane的css将在图像周围提供一个红色边框:
-fx-padding: 10;
-fx-background-color: firebrick;
如果希望定义边界的背景在边缘处弯曲,请使用:
-fx-background-radius: 5;
这将获得一个如下所示的图像,其中图像被包围在阴影边框中:
如果您想实际环绕图像本身,这有点棘手。您需要将一些代码应用于:
你为什么要在没有css的情况下完成它?可能是@ItachiUchiha的重复,那么你如何在这里使用css???@James_D我通过了[图像视图上的边框半径和阴影](如上所述进行了编辑,但我的图像将不会显示在滚动窗格上
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();
}
}
<?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>