изображение внутри окна некрасиво

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

EDIT:

Я проверил несколько больше вещи, так как я задал вопрос:

Проблема присутствует с ОКОМ и QMAKE, на Linux и Windows.

Загрузка изображения из qrc или загрузка его извне приложения имеют тот же результат.

Меньшее изображение работать без проблем. так что это, вероятно, размер изображения, вызывающего настоящую проблему (256 * 16064)

Answer 1

Размер изображения задача (256 × 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

Вы можете попробовать опцию mipmap, если вы используете QtQuick 2.5.

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

Это не будет пиксель совершенным, но его намного более гладким, чем при использовании свойства гладкого или анти-aliase.

Для идеального пикселя вам необходимо знать точное разрешение, плотность пикселей и т. Д. Или ваше целевое устройство. Если вы не можете этого гарантировать, вы никогда не станете идеальным пикселем.

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)) 
}