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)
        }
    }
相关推荐
C++ 老炮儿的技术栈5 小时前
VS2015 + Qt 实现图形化Hello World(详细步骤)
c语言·开发语言·c++·windows·qt
C++ 老炮儿的技术栈7 小时前
Qt Creator中不写代如何设置 QLabel的颜色
c语言·开发语言·c++·qt·算法
ae_zr1 天前
QT动态编译应用后,如何快速获取依赖
开发语言·qt
LYOBOYI1231 天前
qml的对象树机制
c++·qt
菜鸟小芯1 天前
Qt Creator 集成开发环境下载安装
开发语言·qt
牵牛老人1 天前
Qt中集成 MQTT 来实现物联网通信:从原理到实战全解析
开发语言·qt·物联网
LYOBOYI1231 天前
qml的布局策略
c++·qt
小小码农Come on1 天前
QT常用控件:QListWidget
开发语言·qt
侯孟禹1 天前
Gemini写的抠图工具
qt·opencv
空空空空空空空空空空空空如也1 天前
QT通过编译宏区分x86 linux arm的方法
linux·开发语言·qt