Question

这是一个非常简单的QML代码

Window {
    id: window
    width: 800
    height: 600
    visible: true

    Image {
        id: image
        source: "myImage.png"
    }
}

图像需要完美显示像素。但有一种默认的抗眩化使图像变得丑陋。我将渲染与其他图像阅读器进行了比较，显然存在一个问题。

我尝试过（不是先同时将它们组合起来）：

antialiasing: false
smooth: false
autoTransform: false
fillMode: Image.PreserveAspectFit
fillMode: Image.Pad

没有任何效果，图像保持模糊丑陋

也许Window组件正在做某事或QmlEngine，我正在加载我的qml：

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl("qrc:/ui.qml"));
    return app.exec();
}

这是一个测试项目：https://github.com/BlueMagma2/imageIssue

编辑：

自从我提出问题以来，我已经测试了一些事情：

在Linux和Windows上，Qbs和QMake存在问题。

从qrc加载图像或从应用程序外部加载图像会产生相同的结果。

较小的图像工作没有问题。所以它可能是导致真正麻烦的图像大小（256 * 16064）

Answer 1

图像的大小是问题（256 x 16064），特别是：高度

不同高度的测试显示，在8192px高度之后的某处，移动和模糊效果开始破坏图像（有时图像甚至变黑）。

解决此问题的唯一方法是将图像缩小。

我是用QQuickImageProvider做的，由于这个图像是一个图块集，我为每个图块（32 x 32）剪切它。对于其他图像，最好选择更大的尺寸

class TileImageProvider : public QQuickImageProvider
{

public:
    TileImageProvider() : QQuickImageProvider(QQuickImageProvider::Image) {}

    QHash<QString, QImage> tilesetCache;

    virtual QImage requestImage(const QString &id, QSize *size, const QSize& requestedSize) {
        int width = 32;
        int height = 32;
        QStringList idData = id.split("/");
        int posX = idData.at(1).toInt();
        int posY = idData.at(2).toInt();
        if (size)
            *size = QSize(width, height);
        QImage image;
        if (!tilesetCache.contains(idData.at(0))) {
            image = QImage(":/" + idData.at(0));
            tilesetCache[idData.at(0)] = image;
        } else {
            image = tilesetCache[idData.at(0)];
        }
        return image.copy(posX * width, posY * height, width, height);
    }
};

您需要向引擎声明您的提供商：

QQmlApplicationEngine engine;
engine.addImageProvider(QLatin1String("tile"), new TileImageProvider);

以下是如何从QML加载它的示例：

Grid {
    id: grid
    columns: 7;
    rows: 20;

    Repeater {
        model: grid.columns * grid.rows
        delegate: Image {
            id: image
            width: 32
            height: 32
            asynchronous: true
            source: "image://tile/image.png/" + posX + "/" + posY
            smooth: false
            antialiasing: false
            fillMode: Image.Pad;

            property int posX: index % grid.columns
            property int posY: (index - posX) / grid.columns
        }
    }
}

Answer 2

如果您使用的是QtQuick 2.5，可以尝试使用mipmap选项。

http://doc.qt.io/qt-5/qml-qtquick-image.html#mipmap-prop

它不会像素完美，但比使用平滑或抗锯齿属性要平滑得多。

要想要像素完美，您需要知道精确的分辨率，像素密度等，或者您的目标设备。如果你不能保证这一点，那么你无论如何都不会完美。

Answer 3

我通过绑定定位了非常类似的问题。在谷歌搜索没有结果后，我试图将Math.round（）添加到坐标，它有所帮助！

handle: Image {
     id: thumb
     source: "thumb.png"
     x: Math.round( parent.leftPadding + parent.availableWidth / 2 - width / 2 )
     y: Math.round( parent.topPadding + parent.visualPosition * (parent.availableHeight - height) )
}

窗口内的图像很难看

3 个答案: