Qt/QML学习-Dial

QML学习

main.qml

复制代码
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Dial {
        anchors.fill: parent
        id: dial
        // 设置旋钮的范围
        from: 0
        to: 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: 0
            width: dial.coeff
            height: dial.coeff
            color: "transparent"
            border.width: 1
            x: parent.width / 2 - parent.angleX - (width / 2)
            y: parent.height / 2 - parent.angleY - (height / 2)
            rotation: dial.angle
        }

        // 绘制背景
        background: Rectangle {
            id: backgroundRect
            radius: (dial.width > dial.height)? (dial.height / 2): (dial.width / 2)
            width: radius * 2
            height: radius * 2
            anchors.centerIn: dial
            color: "transparent"
            border.width: 1
            Canvas {
                anchors.fill: parent
                onPaint: {
                    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: label
            text: "0"
            font.bold: true
            font.pixelSize: 30
            anchors.centerIn: parent
        }
    }
}

演示

视频讲解

相关推荐
敲敲了个代码5 分钟前
为什么 Electron 项目推荐使用 Monorepo 架构 [特殊字符][特殊字符][特殊字符]
前端·javascript·学习·架构·electron·github
俊俊谢19 分钟前
【序章】金融量化入门级学习——暨一颗韭菜的茁壮成长
学习·金融
Ro Jace22 分钟前
“透彻式学习”与“渗透式学习”
学习
✎ ﹏梦醒͜ღ҉繁华落℘1 小时前
freeRTOS学习笔记(十二)--信号量
笔记·学习
野老杂谈3 小时前
如何快速学习智能合约开发语言 Solidity
开发语言·学习·智能合约·solidity·以太坊·区块链开发
Han.miracle3 小时前
Java线程的学习—多线程(一)
java·开发语言·学习
忧郁奔向冷的天3 小时前
视觉SLAM十四讲2nd—学习笔记(二)20250817
笔记·学习
立志成为大牛的小牛4 小时前
数据结构——三十一、最小生成树(王道408)
数据结构·学习·程序人生·考研·算法
Every exam must be5 小时前
10.27 JS学习12
开发语言·javascript·学习
能工智人小辰5 小时前
VMamba: Visual State Space Model学习笔记
笔记·学习