使用 Qt Quick 缩放像素艺术 [英] Scaling pixel art with Qt Quick

问题描述

我有一个使用像素艺术的 Qt Quick 游戏.例如:

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

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

我想缩放图片，所以我增加了尺寸:

I want to scale the 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
    }
}

图像变得模糊.如何在保持图像清晰度"的同时缩放图像，使其看起来像这样:

The image becomes blurry. How can I scale the image while preserving its "sharpness", so that it looks like this:

推荐答案

缩放时图像模糊，因为 smooth 属性默认为 true.

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

主要用于基于图像的项目，以决定项目是否应使用平滑采样.平滑采样采用线性插值，非平滑采用最近邻采样.

Primarily used in image based items to decide if the item should use smooth sampling or not. Smooth sampling is performed using linear interpolation, while non-smooth is performed using nearest neighbor.

将其设置为 false 以阻止这种情况发生:

Set it to false to stop this from happening:

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

有关缩放的更多信息，请参阅:

For more information on scaling, see:

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

这篇关于使用 Qt Quick 缩放像素艺术的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！