Qt/QML学习-Dial

QML学习

• Dial例程
• 视频讲解
• 代码

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Dial {anchors.fill: parentid: dial// 设置旋钮的范围from: 0to: 100// 设置旋钮的初始值value: 50// 设置旋钮的步长stepSize: 0.1// 监听旋钮值变化的信号onValueChanged: {label.text = value.toFixed(1);}// 计算弧度property real angleInRadian: (dial.angle * Math.PI) / 180// 背景视图以中心为原点(0, 0)来计算，(0, radius)是初始坐标property real coeff: 30// 计算旋转后的坐标property real angleX: - (backgroundRect.radius - coeff) * Math.sin(angleInRadian)property real angleY: (backgroundRect.radius - coeff) * Math.cos(angleInRadian)// 绘制手柄handle: Rectangle {radius: 0width: dial.coeffheight: dial.coeffcolor: "transparent"border.width: 1x: parent.width / 2 - parent.angleX - (width / 2)y: parent.height / 2 - parent.angleY - (height / 2)rotation: dial.angle}// 绘制背景background: Rectangle {id: backgroundRectradius: (dial.width > dial.height)? (dial.height / 2): (dial.width / 2)width: radius * 2height: radius * 2anchors.centerIn: dialcolor: "transparent"border.width: 1Canvas {anchors.fill: parentonPaint: {draw()}function draw() {var ctx = getContext("2d")// 绘制背景ctx.clearRect(0, 0, width, height)// 背景动态与角度绑定ctx.beginPath();ctx.arc(width / 2, height / 2,backgroundRect.radius - dial.coeff,(-140 - 90) * Math.PI / 180,(dial.angle - 90) * Math.PI / 180, false);ctx.stroke();requestAnimationFrame(draw)}}}// 中心位置显示数值Label {id: labeltext: "0"font.bold: truefont.pixelSize: 30anchors.centerIn: parent}}
}

演示

视频讲解