QML图像平滑属性不起作用

Question

在 QML 中，我创建了一个 Rectangle 视图，其中包含一组 Image 元素。我似乎无法让 smooth 属性工作，视图和图像都设置为 true。我试过自己缩放图像并缩放视图。无论我做什么，我都会得到一个锯齿状的缩放图像。我错过了什么吗？

我正在使用 Qt 5.2 并使用 QtQuick2ApplicationViewer（QQuickView 的子类）作为我的主要视图。

我找到了通过替换引擎中的图像处理程序来应用平滑的解决方案，但我觉得 smooth 属性应该开箱即用。

代码：

Image {
    source: "image_400x400.png"
    width:  400
    height: 400
    smooth: true

    transform {
        Scale {xScale: 0.25; yScale: 0.25}
    }
}

第二次尝试：

Image {
    source: "image_400x400.png"
    width:  100
    height: 100
    smooth: true
}

第三次尝试：

Rectangle {
    width:  400
    height: 400
    smooth: true

    Image {
        source: "image_400x400.png"
        width:  400
        height: 400
        smooth: true
    }

    transform {
        Scale {xScale: 0.25; yScale: 0.25}
    }
}

我每次都得到相同的结果。

更新：按照 Nejat 的建议，我尝试了新的 Qt 5 antialiasing 属性。结果确实有所改善，但是当缩放到 0.5 倍以下时，边缘仍然有点锯齿状。有什么办法可以改变抗锯齿质量？

从左到右：

• 预期输出（用 Photoshop 缩放，未编辑）
• antialiasing 和 smooth 已启用
• 仅smooth 启用

我还想知道为什么smooth 什么都不做。

Answer 1

为了平滑下采样，您需要 mipmaps！

使用 Qt 5.3（即将发布），这将起作用：

Image {
    source: "image_400x400.png"
    width: 100
    height: 100
    mipmap: true
}

对于 Qt 5.2，您可以尝试以下方法作为多重采样方法的更高质量替代方案：

ShaderEffectSource {
    id: src
    sourceItem: Image { source: "image_400x400.png" }
    mipmap: true
}

ShaderEffect {
    width: 100
    height: 100
    property var source: src
}

如果您不需要动态更改图像的比例，最佳方法（适用于所有相关 Qt 版本）是这样的：

Image {
    source: "image_400x400.png"
    sourceSize.width: 100
    sourceSize.height: 100
}

图像将在 CPU 上进行高质量缩小，然后上传到 GPU。 请注意，由于图像信息丢失，以原始图像的比例显示时会看起来更糟。

关于smooth 属性：

Image 的 smooth 属性启用线性插值。 默认开启，是对nearest-neighbor interpolation的改进，smooth = false时使用；但它对缩小规模没有多大帮助。

关于antialising 属性：

设置antialiasing = true 根本不会改变图像缩放的质量。它只是平滑边缘，这在图像旋转时可能很重要。

Answer 2

更新： 从 Qt 5.3 开始，mipmap 属性解决了这个问题。以下答案仅适用于 Qt 5.2 或更早版本。

添加antialiasing 属性（从Qt 5 开始）完成了您期望smooth 属性所做的事情。谢谢你，Nejat。但是，正如更新的问题中所提出的，抗锯齿质量仍然很差。为了解决这个问题，定义一个自定义的表面格式来设置一个自定义的抗锯齿采样率（摘自main.cpp）：

QtQuick2ApplicationViewer view;

QSurfaceFormat format;
format.setSamples(16);
view.setFormat(format);

请参阅文档：QSurfaceFormat::setSamples。

许多人建议使用 SVG 而不是 PNG。根据我的经验，至少在默认的 Qt Quick 设置中，SVG 会以一定的大小进行采样，因此与 PNG 的处理方式完全相同。

Answer 3

您应该将“antialiasing”属性设置为 true。它可以设置在任何项目上，包括画布。来自文档：

主要用于基于矩形和图像的元素来决定是否 项目是否应该使用抗锯齿。启用抗锯齿的项目 需要更多内存并且渲染速度可能较慢。

默认为假

所以它可以是这样的：

Image {
    source: "image_400x400.png"
    width:  100
    height: 100
    smooth: true
    antialiasing: true
}