QT QML 实现的摇杆按钮,类似王者荣耀 左边方向导航键

特点:在一定范围内,调整第一次按的点为中心点,然后可以开始滑动,输出坐标变化的值。

调试时辅助线显示出来如下图

此控件已封装为单独的qml组件, UI风格可更改,改图片就行

已封装为单独的QML组件文件,直接插入项目使用

提供信号如下:

1、开始按下信号

2、停止按下信号

3、X,Y坐标变化信号

可根据情况增加自定义信号

css 复制代码
property real   xAxis:                  0
property real   yAxis:                  0

signal timerControl(int status)
// 1  按下的信号
// 2  松手的信号
css 复制代码
    DirectBtnRange{
        id:bomdirecrangebtn
        anchors.right:          parent.right
        anchors.top:         parent.top
        anchors.rightMargin:    -xPositionDelta + 70 -20 - 20
        anchors.topMargin:    yPositionDelta + 100 +50
        width: 224 + 124*2
        height: 224 + 124*2
        color:              "transparent"
        onTimerControl: {
            if(status === 1){
                direcTimer.running = true
            }
            else{
                direcTimer.running = false
            }
        }
    }

    Timer{
        id:direcTimer
        interval: 100
        running: false
        repeat: true
        onTriggered: {
                console.log("bomdirecrangebtn.xAxis = __",bomdirecrangebtn.xAxis)
                console.log("bomdirecrangebtn.yAxis = __",-bomdirecrangebtn.yAxis)
        }
    }
相关推荐
winfield8213 小时前
MCP 协议详解
开发语言·网络·qt
秦jh_4 小时前
【Qt】常用控件(上)
服务器·数据库·qt
刃神太酷啦5 小时前
C++ list 容器全解析:从构造到模拟实现的深度探索----《Hello C++ Wrold!》(16)--(C/C++)
java·c语言·c++·qt·算法·leetcode·list
水煎包V:YEDIYYDS8885 小时前
QT modbus 通信教程,把modbus封装到线程单例中,在线程内完成数据收发,解析。把重要数据以信号方式通知到qml层展示,解决UI卡顿
qt·modbus·线程服务
东哥很忙XH5 小时前
python使用PyQt5开发桌面端串口通信
开发语言·驱动开发·python·qt
汪宁宇7 小时前
如何在QT5+MinGW环境中编译使用QGIS开发地图应用
c++·qt·qgis·mingw·地图库
刺客xs8 小时前
Qt-----QSS样式表
开发语言·javascript·qt
qq_401700418 小时前
QProgressBar+QSS 进度条
qt
小灰灰搞电子9 小时前
Qt PDF模块详解
数据库·qt·pdf