Conversation
|
个人认为 NBT 图标可能不太适合做圆角 由于 NBT 图标本身有一层边框，圆角会导致四个角的边框像素被裁切掉，可能会产生视觉上的破损感。（如图，复合标签图标）
我对 UI 设计没有太多把握，并不反对这个修改，只是看着怪怪的，只是想确认一下是否是预期的视觉风格？ |
|
There was a problem hiding this comment.
Pull request overview
This pull request adds rounded corners to image icons throughout the application by introducing a new JFXImageView component that extends JavaFX's ImageView with automatic rounded corner clipping. The change enhances the visual consistency and modern appearance of the UI, particularly in areas like the mod download pages, world lists, resource pack displays, and game version selections.
Changes:
- Created new
JFXImageViewclass with 6px rounded corners applied via clip region - Replaced
ImageViewwithJFXImageViewin 13 UI files across world management, mod management, resource packs, datapacks, schematics, and download pages - Consolidated imports to use wildcard imports for
org.jackhuang.hmcl.ui.construct.*package in several files
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| JFXImageView.java | New component extending ImageView with rounded corner clipping |
| ImagePickerItem.java | Updated image picker to use rounded corner image view |
| WorldListPage.java | Applied rounded corners to world icons in list view |
| WorldInfoPage.java | Applied rounded corners to world info page icon |
| WorldBackupsPage.java | Applied rounded corners to world backup icons |
| SchematicsPage.java | Applied rounded corners to schematic preview icons |
| ResourcepackListPage.java | Applied rounded corners to resource pack icons |
| ModListPageSkin.java | Applied rounded corners to mod icons in lists and dialogs |
| GameListPopupMenu.java | Applied rounded corners to game icons in popup menu |
| GameListCell.java | Applied rounded corners to game version icons in main list |
| DownloadPage.java | Applied rounded corners to mod icons on download detail pages |
| DownloadListPage.java | Applied rounded corners to mod icons in download search results |
| DatapackListPageSkin.java | Applied rounded corners to datapack icons |
| VersionsPage.java | Consolidated imports (but didn't update ImageView usage) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| public JFXImageView(String url) { | ||
| super(url); | ||
| init(); | ||
| } |
There was a problem hiding this comment.
JFXImageView is missing a constructor that accepts an Image parameter. The standard JavaFX ImageView class has a constructor ImageView(Image image), which is used in several places in the codebase (e.g., HTMLRenderer.java:191, InstallerItem.java:298, LineComponent.java:216, VersionIconDialog.java:106, MainPage.java:106). If these locations need rounded corners in the future, they won't be able to use JFXImageView without first refactoring to set the image after construction.
Consider adding a constructor: public JFXImageView(Image image) { super(image); init(); }
| private final VersionsPage control; | ||
|
|
||
| private final TwoLineListItem twoLineListItem = new TwoLineListItem(); | ||
| private final ImageView imageView = new ImageView(); |
There was a problem hiding this comment.
This ImageView displays version icons (like game versions, Forge, Fabric, etc.) and should probably also use JFXImageView for consistency with other icon displays in the application that were updated in this PR. The PR title indicates adding rounded corners to "most" icons, and this appears to be one that was missed.
To fix this, change line 156 to: private final ImageView imageView = new JFXImageView();
| clip.setArcWidth(radius); | ||
| clip.setArcHeight(radius); |
There was a problem hiding this comment.
The arc width and arc height should be set to twice the radius value for proper rounded corners with the desired radius. In JavaFX, arcWidth and arcHeight define the full width and height of the ellipse used to round the corners, not the radius.
Change the implementation to: clip.setArcWidth(radius * 2); clip.setArcHeight(radius * 2);
| clip.setArcWidth(radius); | |
| clip.setArcHeight(radius); | |
| clip.setArcWidth(radius * 2); | |
| clip.setArcHeight(radius * 2); |
| clip.widthProperty().bind(this.fitWidthProperty()); | ||
| clip.heightProperty().bind(this.fitHeightProperty()); |
There was a problem hiding this comment.
The clip's width and height properties are bound to fitWidthProperty and fitHeightProperty. However, ImageView can have fitWidth and fitHeight set to -1 (which means "use the actual image size"). When FXUtils.limitSize() is called on images that are smaller than the max size, it sets fitWidth and fitHeight to -1. This will cause the clip Rectangle to have negative dimensions, which may result in the image not being displayed correctly or causing rendering issues.
You need to handle the case where fitWidth or fitHeight is -1. Consider binding to the actual bounds of the ImageView instead, or using a ChangeListener to update the clip dimensions based on whether fit dimensions are set or the actual image size should be used.
3 participants
例如模组下载页面
