Question

如何以更好的质量渲染图像？

节点是带有css的窗格：

.imagePane {
    -fx-background-repeat: no-repeat;
    -fx-background-image: url('../../img/logo/icon_white.png');
    -fx-background-size: cover; 
}

应用程序内的图片：

默认图片：

链接到PSD： https://drive.google.com/file/d/0B0YK52wzjJg3c2NFc0NSTDNKWGM/view?usp=sharing

我试图提供最佳图像质量，但它仍会导致像素化

Answer 1

我建议您尝试在Java代码中初始化Background。您可以将背景设置为窗格。

Pane#setBackground(background);

如果初始化Background，则首先初始化BackgroundImage，BackgroundImage需要Image。在图像的构造函数中，您可以定义requestedWith和requestedHeight。这些是应该加载文件的解析属性。最终的代码看起来像这样。

pane.setBackground(new Background(new BackgroundImage(new Image(inputStream, 500, 500, true, true), BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, new BackgroundSize(pane.getWidth(), pane.getHeight(), false, false, false, true))));

在这种情况下，图像将以500 x 500的分辨率加载，并调整为pane.getHeight和pane.getWith。

Answer 2

问题与CSS或Java代码无关，这是一个图像处理问题，当你缩小图像的大小时，边缘的质量和清晰度会失真。
/> 正如@serge所提到的，您的图片尺寸高度为307，宽度为594，因此您应该找到与width完全匹配的height和aspect ratio代码，您可以使用像{{{}}这样的工具{3}}为您的目的找到最佳数字。我在93 X 180窗格上使用了您的图片，结果如下：

Image aspect ratio and resizing calculator
正如您在Hello World!示例中看到的那样，左图像质量不够好，尤其是边缘和边框。

解决方案：

调整所需图像大小   尺寸使用 Photoshop 等工具。你可以得到更多   信息

转换你的   原始 PNG 图像为 SVG 等矢量格式。您可以使用   一些在线工具，如How To Resize An Image on Photoshop And Keep It Sharp

JavaFX ImagePane调整坏质量

2 个答案:

解决方案：