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
        }
    }
}

演示

视频讲解

相关推荐
数字芯片实验室37 分钟前
分享一个可以学习正则表达式的网址:Pythex.org
学习·正则表达式
陈洪奇1 小时前
注册中心学习笔记整理
笔记·学习
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
哈市雪花3 小时前
相机:以鼠标点为中心缩放(使用OpenGL+QT开发三维CAD)
qt·相机·opengl·cad·缩放·工业软件·渲染效果
Tony小周6 小时前
实现一个点击输入框可以弹出的数字软键盘控件 qt 5.12
开发语言·数据库·qt
fen_fen6 小时前
学习笔记(32):matplotlib绘制简单图表-数据分布图
笔记·学习·matplotlib
萝卜青今天也要开心10 小时前
2025年上半年软件设计师考后分享
笔记·学习
amazinging11 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十七天
python·学习·selenium
吃货界的硬件攻城狮11 小时前
【STM32 学习笔记】SPI通信协议
笔记·stm32·学习
一个天蝎座 白勺 程序猿11 小时前
Python练习(1)Python基础类型操作语法实战:20道实战题解与案例分析(上)
开发语言·python·学习