需要对Qml Image fillMode进行抗锯齿处理

Question

我在QML中有一段代码：

Image {
    anchors.rightMargin: 10
    anchors.leftMargin: 10
    anchors.bottomMargin: 10
    anchors.topMargin: 10
    anchors.fill: parent
    source: "Google Chrome Icon.png"
    fillMode: Image.PreserveAspectFit
    }

图像会随窗口自动拉伸。但拉伸方法没有抗锯齿，因此丑陋的结果：

chrome image http://img838.imageshack.us/img838/667/unantialiasedchrome.png

有什么方法可以让结果变得很棒吗？

Answer 1

作为纯QML解决方案，您只需将Image元素的smooth property设置为true：

import QtQuick 1.0

Image {
    smooth: true  // smoother image
    anchors.rightMargin: 10
    anchors.leftMargin: 10
    anchors.bottomMargin: 10
    anchors.topMargin: 10
    anchors.fill: parent
    source: "Google Chrome Icon.png"
    fillMode: Image.PreserveAspectFit
}

Answer 2

您可以在QDeclarativeView，

中启用抗锯齿功能

QDeclarativeView view;
view.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
view.setResizeMode( QDeclarativeView::SizeRootObjectToView );
view.setSource(QUrl("qrc:/main.qml"));
view.show();

在拉伸时如何使图像看起来很好，我建议你使用svg图像而不是png图像。