有必要让QtQuick 2的Canvas元素HiDPI-(视网膜 – )知道吗？

我有以下qml应用程序：

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import QtQuick.Window 2.0

applicationwindow {
    id: window
    width: 480
    height: 240


    RowLayout {

        Rectangle {
            width: window.height
            height: window.height
            radius: window.height / 2
            color: "black"
        }

        Canvas {
            id: canvas
            width: window.height
            height: window.height

            onPaint: {
                var ctx = canvas.getContext('2d');
                var originX = window.height / 2
                var originY = window.height / 2
                var radius = window.height / 2

                ctx.save();

                ctx.beginPath();
                ctx.arc(originX,originY,radius,2 * Math.PI);
                ctx.fillStyle = Qt.rgba(0,1);
                ctx.fill();

                ctx.restore();
            }

        }
    }
}

这会产生两个彼此相邻的黑色圆圈.左边的(矩形)在Retina显示屏上很清晰,而右边的(Canvas)非常模糊.如果我加

antialiasing: false

到画布,它会产生粗糙的模糊像素.

我需要做些什么才能使Canvas hidpi感知？

(我在Mac OS X 10.8上使用Qt 5.2.0 beta 1)

编辑：我想出的解决方法是将Canvas包装在一个Item中,将所有内容放在onPaint内部,然后使用Canvas上的变换将其缩小.

Canvas {
        id: canvas
        x: 0
        y: 0
        width: parent.width * 2   // really parent.width after the transform
        heigth: parent.height * 2 // really parent.height after the transform

        /* ... */

        // This scales everything down by a factor of two.
        transform: Scale {
            xScale: .5
            yScale: .5
        }

        onPaint: {
            var ctx = canvas.getContext('2d');
            ctx.save();
            ctx.scale(2,2)       // This scales everything up by a factor of two.

            /* ... */
        }
    }

解决方法

我们使用了相同的技巧,将大小加倍,然后缩小为 ProgressCircle in qml-material.但是,您可以进行一些改进：

>使用比例而不是变换.
>使用QtQuick.Window模块中的Screen.devicePixelRatio,而不是将比例因子硬编码为2 / 0.5.

所以你的代码可以简化为：

Canvas {
    property int ratio: Screen.devicePixelRatio

    width: parent.width * ratio
    heigth: parent.height * ratio
    scale: 1/ratio

    onPaint: {
        var ctx = canvas.getContext('2d');
        ctx.save();
        ctx.scale(ratio,ratio)

        // ...
    }
}