Joystick 虚拟操纵杆

Joystick 虚拟操纵杆

多点触控
–输出
4象限坐标输出 标准单位笛卡尔系，控件中心（0，0）
xAxis: 取值范围 [-1,1], 左 值<0, 右 值>0
yAxis: 取值范围 [-1,1], 下 值<0, 上 值>0

效果图 ：

import QtQuick                  2.5

Rectangle {
    id:             _joyRoot

    width: dishRadius*2
    height: dishRadius*2
    radius: dishRadius

    color: "transparent"
    border.color: "#c6c6c6"
    border.width: 2


    //--输出
    /* -- 4象限坐标输出 标准单位笛卡尔系，控件中心（0，0）
    * xAxis:  取值范围 [-1,1], 左 值<0, 右 值>0
    * yAxis:  取值范围 [-1,1], 下 值<0, 上 值>0
    */
    property real   xAxis:          0
    property real   yAxis:          0

    //--控件位置控制
    property real   xPositionDelta: 0                   ///< 用于设置手柄中心到触摸点   parent.leftMargin:     xPositionDelta
    property real   yPositionDelta: 0                   ///< 用于设置手柄中心到触摸点   parent.bottomMargin:   -yPositionDelta

    property bool   _processTouchPoints:    false       //处理触摸点

    //--手柄控制
    property real   _centerXY:              width / 2   //中间坐标值
    property real   stickPositionX:         _centerXY   //操纵杆中心x坐标
    property real   stickPositionY:         _centerXY   //操纵杆中心y坐标

    property int thumbRadius:60                         //手柄半径
    property int dishRadius:300                         //底盘半径

    property bool  lightColors:    true                 /// 启用浅色背景图片

    //-- 调试
    onXAxisChanged: {
        console.log(xAxis,yAxis)
    }
    onYAxisChanged: {
        console.log(xAxis,yAxis)
    }

    // x轴输出处理
    onStickPositionXChanged: {
        var xAxisPercent = stickPositionX / width
        xAxis = 2*xAxisPercent - 1
    }

    // y轴输出处理
    onStickPositionYChanged: {
        var yAxisPercent = stickPositionY / width
        yAxis = 1 - 2*yAxisPercent
    }

    //居中手柄
    function reCenter()
    {
        _processTouchPoints = false

        xPositionDelta = 0
        yPositionDelta = 0

        stickPositionX = _centerXY
        stickPositionY = _centerXY
    }

    //手柄按下处理
    function thumbDown(touchPoints)
    {
        //求出触点位置到 背景中心 相对坐标
        xPositionDelta = touchPoints[0].x - _centerXY
        yPositionDelta = touchPoints[0].y - _centerXY
        // 等待，直到我们将控制移动到正确的位置，然后再处理触点
        _processTouchPoints = true
    }


    Image {//-- 背景圆盘
        anchors.fill:       parent
        source:             lightColors ? "qrc:/JoystickBezel.png" : "qrc:/JoystickBezelLight.png"
        mipmap:             true
        smooth:             true
    }

    Rectangle {//-- 中间环（仅仅是显示效果）
        anchors.margins:    parent.width / 4
        anchors.fill:       parent
        radius:             width / 2
        border.color:        "#c6c6c6"
        border.width:       2
        color:              "#c0c0c0"

        gradient: Gradient {
            GradientStop { position: 0.0; color: "#eeeeee" }
            GradientStop { position: 0.5; color: "#555555" }
            GradientStop { position: 1.0; color: "#eeeeee" }
        }
    }

    Rectangle {//--thumb 手柄
        width:  thumbRadius*2
        height: thumbRadius*2
        radius: thumbRadius
        color:  "#111111"
        x:      stickPositionX - thumbRadius
        y:      stickPositionY - thumbRadius

        gradient: Gradient {
            GradientStop { position: 0.0; color: "#aaaaaa" }
            GradientStop { position: 0.3; color: "#666666" }
            GradientStop { position: 1.0; color: "#111111" }
        }
    }

    Connections {//--移动操纵杆   设置操纵杆中心坐标，以及限制范围
        target: touchPoint

        onXChanged: {//--
            if (_processTouchPoints) {
                _joyRoot.stickPositionX = Math.max(Math.min(touchPoint.x, _joyRoot.width), 0)
            }
        }
        onYChanged: {//--
            if (_processTouchPoints) {
                _joyRoot.stickPositionY = Math.max(Math.min(touchPoint.y, _joyRoot.height), 0)
            }
        }
    }


    MultiPointTouchArea {//--多点触控
        anchors.fill:       parent
        minimumTouchPoints: 1
        maximumTouchPoints: 1
        touchPoints:        [ TouchPoint { id: touchPoint } ]

        onPressed:  _joyRoot.thumbDown(touchPoints)
        onReleased: _joyRoot.reCenter()
    }

}