Qt QML图像平滑属性不工作

Qt QML图像平滑属性不工作,qt,qml,antialiasing,Qt,Qml,Antialiasing,在QML中,我创建了一个矩形视图,其中包含一组图像元素。我似乎无法使平滑属性工作,该属性对于视图和图像都设置为true。我尝试过缩放图像本身和视图。无论我做什么,我都会得到一个锯齿状的缩放图像。我错过什么了吗 我正在使用Qt5.2,并使用QtQuick2ApplicationViewer(QQuickView的子类)作为我的主视图 我已经找到了通过替换引擎中的图像处理程序来应用平滑的解决方案,但是我觉得平滑属性应该是现成的 代码: 第二次尝试: Image { source: "imag

在QML中,我创建了一个
矩形
视图,其中包含一组
图像
元素。我似乎无法使
平滑
属性工作,该属性对于视图和图像都设置为
true
。我尝试过缩放图像本身和视图。无论我做什么,我都会得到一个锯齿状的缩放图像。我错过什么了吗

我正在使用Qt5.2,并使用
QtQuick2ApplicationViewer
QQuickView
的子类)作为我的主视图

我已经找到了通过替换引擎中的图像处理程序来应用平滑的解决方案,但是我觉得
平滑
属性应该是现成的

代码:

第二次尝试:

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}
    }
}
第三次尝试:

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的建议,我尝试了新的Qt5
抗锯齿属性。结果确实有所改善,但当缩放到0.5倍以下时,边缘仍然会有点参差不齐。有没有办法改变抗锯齿质量

从左到右:

  • 预期输出(使用Photoshop缩放,未编辑)
  • 抗锯齿
    平滑
    已启用
  • 仅启用了平滑


我还想知道为什么
smooth
没有任何作用。

您应该将“抗锯齿”属性设置为true。它可以在任何项目上设置,包括画布。从文件中:

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

默认值为false

所以它可以是这样的:

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

更新:从Qt5.3开始,
mipmap
属性解决了这个问题。以下答案仅适用于Qt 5.2或更早版本

添加
抗锯齿
属性(从Qt5开始)实现了
平滑
属性所能实现的功能。谢谢你。但是,正如更新的问题中提出的,抗锯齿质量仍然很差。要解决此问题,请定义自定义曲面格式以设置自定义抗锯齿采样率(摘自
main.cpp
):

请参阅文档:


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

要实现平滑下采样,您需要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版本)如下:

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

关于
平滑
属性:

图像的
平滑
属性启用线性插值。默认情况下,它是打开的,是对的改进,当
平滑=false时使用;但这对缩小规模没有多大帮助

关于
反序列化
属性:


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

谢谢Nejat!似乎抗锯齿是Qt5中的一个新属性。它确实改善了渲染效果,但结果仍然有点参差不齐。我已经用你建议的结果更新了我的答案。我仍然觉得
smooth
属性应该有所不同(它仍然不起任何作用),我应该能够以某种方式设置抗锯齿质量。有什么想法吗?为了使图像在拉伸时看起来更好,我建议您使用svg图像而不是png图像。使用svg图像没有任何区别。SVG似乎是预采样的,所以当我缩放图像时,同样的低质量抗锯齿是可见的。SVG图像是向量。与PNG等光栅图像不同,矢量在缩放过程中不会丢失质量。我认为问题在于其他方面。这真的很复杂,谢谢Kay!我现在正在摆弄它——它可以工作,但是开箱即用的结果有太多的锯齿,当我将图像缩小4倍以上时,它会变得模糊。我想下一步是编写自定义着色器效果?我可能会坚持我之前发布的surface格式解决方案,以保持简单。再次感谢Kay,
mipmap:true
确实解决了Qt 5.3的问题。谢谢!我花了整整十五分钟的时间对
antialias
属性进行了模拟,想知道它为什么什么都没做。。。。
Image {
    source: "image_400x400.png"
    sourceSize.width: 100
    sourceSize.height: 100
}