Joystick 虚拟操纵杆

Joystick 虚拟操纵杆

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

效果图 ：

import QtQuick                  2.5Rectangle {id:             _joyRootwidth: dishRadius*2height: dishRadius*2radius: dishRadiuscolor: "transparent"border.color: "#c6c6c6"border.width: 2//--输出/* -- 4象限坐标输出 标准单位笛卡尔系，控件中心（0，0）* xAxis:  取值范围 [-1,1], 左 值<0, 右 值>0* yAxis:  取值范围 [-1,1], 下 值<0, 上 值>0*/property real   xAxis:          0property real   yAxis:          0//--控件位置控制property real   xPositionDelta: 0                   ///< 用于设置手柄中心到触摸点   parent.leftMargin:     xPositionDeltaproperty real   yPositionDelta: 0                   ///< 用于设置手柄中心到触摸点   parent.bottomMargin:   -yPositionDeltaproperty 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 / widthxAxis = 2*xAxisPercent - 1}// y轴输出处理onStickPositionYChanged: {var yAxisPercent = stickPositionY / widthyAxis = 1 - 2*yAxisPercent}//居中手柄function reCenter(){_processTouchPoints = falsexPositionDelta = 0yPositionDelta = 0stickPositionX = _centerXYstickPositionY = _centerXY}//手柄按下处理function thumbDown(touchPoints){//求出触点位置到 背景中心 相对坐标xPositionDelta = touchPoints[0].x - _centerXYyPositionDelta = touchPoints[0].y - _centerXY// 等待，直到我们将控制移动到正确的位置，然后再处理触点_processTouchPoints = true}Image {//-- 背景圆盘anchors.fill:       parentsource:             lightColors ? "qrc:/JoystickBezel.png" : "qrc:/JoystickBezelLight.png"mipmap:             truesmooth:             true}Rectangle {//-- 中间环（仅仅是显示效果）anchors.margins:    parent.width / 4anchors.fill:       parentradius:             width / 2border.color:        "#c6c6c6"border.width:       2color:              "#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*2height: thumbRadius*2radius: thumbRadiuscolor:  "#111111"x:      stickPositionX - thumbRadiusy:      stickPositionY - thumbRadiusgradient: Gradient {GradientStop { position: 0.0; color: "#aaaaaa" }GradientStop { position: 0.3; color: "#666666" }GradientStop { position: 1.0; color: "#111111" }}}Connections {//--移动操纵杆   设置操纵杆中心坐标，以及限制范围target: touchPointonXChanged: {//--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:       parentminimumTouchPoints: 1maximumTouchPoints: 1touchPoints:        [ TouchPoint { id: touchPoint } ]onPressed:  _joyRoot.thumbDown(touchPoints)onReleased: _joyRoot.reCenter()}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！