我有以下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)
// ...
}
}
