Scaling pixel art with Qt Quick

I have a Qt Quick game that uses pixel art. For instance:

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    id: window
    visible: true
    width: 300
    height: 300
    title: qsTr("PixelArt")

    Image {
        source: "http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png"
        anchors.centerIn: parent
    }
}

original size

I want to scale art, so I increase the size:

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    id: window
    visible: true
    width: 300
    height: 300
    title: qsTr("PixelArt")

    Image {
        source: "http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png"
        anchors.centerIn: parent
        width: 256
        height: 256
    }
}

bad scaled

The image becomes blurry. How to scale the image while maintaining its "sharpness" so that it looks like this:

good scaled

+4
source share
1 answer

The image is blurry when zoomed because by default the smooth property is true.

, , . , .

false, :

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    id: window
    visible: true
    width: 300
    height: 300
    title: qsTr("PixelArt")

    Image {
        source: "http://upload.wikimedia.org/wikipedia/commons/f/f0/Pixelart-tv-iso.png"
        anchors.centerIn: parent
        width: 256
        height: 256
        smooth: false
    }
}

.

http://en.wikipedia.org/wiki/Image_scaling

+11

Source: https://habr.com/ru/post/1540020/


All Articles