Geek asks and answers

Need smoothing for Qml Image fillMode

I have a piece of code in 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
    }

The image is automatically stretched along with the window. But the stretch method is not smooth, so a terrible result is obtained:

chrome image

Is there any way to make the result great?

+3
source share
2 answers

As a pure QML solution, you can simply set the element smoothpropertyImage to 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
}
+5
source

you can enable anti-aliasing by turning it on QDeclarativeView,

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

Be that as it may, the image looks good when stretched, I suggest you use an svg image instead of a png image.

+4
source

More articles:


All Articles