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

演示

视频讲解

相关推荐
2303_Alpha2 天前
SpringBoot
笔记·学习
萘柰奈2 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽2 天前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫2 天前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie2 天前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿2 天前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng2 天前
量子计算学习(第十四周周报)
学习·量子计算
我是菜鸟0713号2 天前
Qt 中 OPC UA 通讯实战
开发语言·qt
JCBP_2 天前
QT(4)
开发语言·汇编·c++·qt·算法
lqjun08273 天前
Qt程序单独运行报错问题
开发语言·qt