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.5x以下时，边缘仍然会有点锯齿。有没有办法改变抗锯齿质量？

从左到右：

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

Three antialiasing results with zoom

我还在想为什么smooth什么都不做。

Answer 1

要进行平滑的下采样，您需要 mipmap ！

使用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属性：

smooth的{{1}}属性可启用线性插值。默认情况下打开，这比Image时的nearest-neighbor interpolation改进了smooth = false;但它对降尺度没什么帮助。

关于antialising属性：

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

Answer 2

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

主要用于Rectangle和基于图像的元素来决定是否     项目应该使用抗锯齿还是不使用。启用了抗锯齿的项目     需要更多内存，渲染速度可能更慢。


默认值为false

所以它可以像：

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

Answer 3

更新：从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完全相同。

QML图像平滑属性不起作用

3 个答案: