gpt4 book ai didi

canvas - 使 QtQuick 2 的 Canvas 元素 HiDPI-(retina-) 感知需要什么?

转载 作者:行者123 更新时间:2023-12-04 07:54:39 25 4
gpt4 key购买 nike

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

编辑:我想出的解决方法是包装 CanvasItem ,将所有内容放大 onPaint然后使用 transformCanvas将其缩小。

    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,我们使用了相同的技巧,将大小翻倍然后缩小。 .但是,您可以进行一些改进:

  • 使用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)

    // ...
    }
    }

    关于canvas - 使 QtQuick 2 的 Canvas 元素 HiDPI-(retina-) 感知需要什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19573456/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com