Qt官方示例-速度仪表盘
该刻度盘控件为一个速度仪表盘。
预览
运行演示
分析
- 采用Qml语言实现；
- 使用到了图片素材(刻度盘，指示器，指示器阴影，覆盖层)；
- 它结合了Image元素，Rotation变换和SpringAnimation行为，用来组合生成交互式的速度仪表盘。
- 核心代码：
Item {
id: root
property real value : 0
width: 210; height: 210
Image { source: "background.png" }
//! [needle_shadow]
Image {
x: 96
y: 35
source: "needle_shadow.png"
transform: Rotation {
origin.x: 9; origin.y: 67
angle: needleRotation.angle
}
}
//! [needle_shadow]
//! [needle]
Image {
id: needle
x: 98; y: 33
antialiasing: true
source: "needle.png"
transform: Rotation {
id: needleRotation
origin.x: 5; origin.y: 65
//! [needle angle]
angle: Math.min(Math.max(-130, root.value*2.6 - 130), 133)
Behavior on angle {
SpringAnimation {
spring: 1.4
damping: .15
}
}
//! [needle angle]
}
}
//! [needle]
//! [overlay]
Image { x: 21; y: 18; source: "overlay.png" }
//! [overlay]
}
关于更多
- 在QtCreator软件可以找到
- 或在你的Qt安装目录
C:\Qt\{你的Qt版本}\Examples\{你的Qt版本}\quick\customitems\dialcontrol找到。 - 相关链接
https://doc.qt.io/qt-5/qtquick-customitems-dialcontrol-example.html本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-09-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录