我有以下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
到画布,它会产生粗糙的模糊像素.
(我在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) // ... } }
原文地址:https://www.jb51.cc/css/215605.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。