Qt官方示例-速度儀錶盤

• 2019 年 10 月 11 日
• 筆記

該刻度盤控制項為一個速度儀錶盤。

預覽

運行演示

分析

• 採用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版本}quickcustomitemsdialcontrol找到。
• 相關鏈接

https://doc.qt.io/qt-5/qtquick-customitems-dialcontrol-example.html