找回密码
 立即注册
Qt开源社区 门户 查看内容

Qt官方示例-速度仪表盘

2019-10-26 12:18| 发布者: admin| 查看: 1987| 评论: 0

摘要: 该刻度盘控件为一个速度仪表盘。预览运行演示分析采用Qml语言实现;使用到了图片素材(刻度盘,指示器,指示器阴影,覆盖层);它结合了Image元素,Rotation变换和SpringAnimation行为,用来组合生成交互式的速度仪表 ...

该刻度盘控件为一个速度仪表盘。

预览




运行演示



分析

  • 采用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


  • Qt君公众号后台回复『Qt示例』获取更多内容。

----------------------------------------------------------------------------------------------------------------------
我们尊重原创,也注重分享,文章来源于微信公众号:Qt君,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了