Question

我有以下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, 0, 2 * Math.PI);
                ctx.fillStyle = Qt.rgba(0, 0, 0, 1);
                ctx.fill();

                ctx.restore();
            }

        }
    }
}

这会产生两个彼此相邻的黑色圆圈。左侧（Rectangle）在Retina显示屏上清晰，而右侧（Canvas）非常模糊。如果我添加

                antialiasing: false

到Canvas，会产生粗糙的模糊像素。

我需要做些什么才能使Canvas知道HiDPI？

_{（我在Mac OS X 10.8上使用Qt 5.2.0 beta 1）}

修改：我想出的解决方法是将Canvas包裹在Item中，在onPaint内扩展所有内容，然后使用{{ 1}} transform缩放比例。

Canvas

Answer 1

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

使用scale代替transform。
使用Screen.devicePixelRatio模块中的QtQuick.Window，而不是将比例因子硬编码为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)

        // ...
    }
}

有必要让QtQuick 2的Canvas元素HiDPI-（视网膜 - ）知道吗？

1 个答案: