QGC二次开发---框选多机执行解锁任务2

上一篇中，已经展示了实现以后的效果动图以及实现思路。此篇着重开始编写前端QML界面代码，包括获取鼠标按压/释放点的坐标、绘制矩形线框的代码。

阻拦地图插件的鼠标事件

在FlightDisplayView.qml中，直接在Map视图添加鼠标事件，将会拖动地图，所以需要在地图窗口添加一个遮罩层（Rectangle）

然后添加鼠标事件

最后添加一个Canvas画布，在鼠标位置改变时绘制，代码如下：

//定义变量
//记录按压、释放时的坐标
property  var pressedPonit;
property  var relasedPonit;
//绘制选中框
//鼠标点击坐标位置
property real startX     //储存鼠标开始时的坐标
property real startY
property real stopX      //储存鼠标结束时的坐标
property real stopY
property bool isMouseMoveEnable: false //是否允许鼠标移动绘制事件

//--------------------------------------------------------------
//-- Map View
        Item {
            id: _flightMapContainer
            z:  mainIsMap ? _mapAndVideo.z + 1 : _mapAndVideo.z + 2
            anchors.left:   _mapAndVideo.left
            anchors.bottom: _mapAndVideo.bottom
            visible:        mainIsMap || _isPipVisible && !QGroundControl.videoManager.fullScreen
            width:          mainIsMap ? _mapAndVideo.width  : _pipSize
            height:         mainIsMap ? _mapAndVideo.height : _pipSize * (9/16)
            states: [
                State {
                    name:   "pipMode"
                    PropertyChanges {
                        target:             _flightMapContainer
                        anchors.margins:    ScreenTools.defaultFontPixelHeight
                    }
                },
                State {
                    name:   "fullMode"
                    PropertyChanges {
                        target:             _flightMapContainer
                        anchors.margins:    0
                    }
                }
            ]
            FlightDisplayViewMap {
                id:                         _fMap
                anchors.fill:               parent
                guidedActionsController:    _guidedController
                missionController:          _planController
                flightWidgets:              flightDisplayViewWidgets
                rightPanelWidth:            ScreenTools.defaultFontPixelHeight * 9
                multiVehicleView:           !singleVehicleView.checked
                scaleState:                 (mainIsMap && flyViewOverlay.item) ? (flyViewOverlay.item.scaleState ? flyViewOverlay.item.scaleState : "bottomMode") : "bottomMode"
                Component.onCompleted: {
                    mainWindow.flightDisplayMap = _fMap
                    _fMap.adjustMapSize()
                }
            }
            //
            Rectangle{
                anchors.fill: parent
                opacity: 0
            }
            //框选边框
            //创建一个画布
            Canvas{
                id:canvas;
                anchors.fill:parent

                onPaint: {
                    var ctx = getContext("2d")
                    ctx.lineWidtn = 3
                    ctx.strokeStyle = "blue";


                    if (!isMouseMoveEnable) {
                        ctx.clearRect(0,0,width,height) //清空所画图形
                        return;
                    }

                    if (isMouseMoveEnable){
                        ctx.clearRect(0,0,width,height)
                    }

                    //开始绘制
                    ctx.beginPath()
                    ctx.moveTo(startX,startY)
                    //console.log(startX,startY)

                    //记录移动终点
                    stopX = area.mouseX
                    stopY = area.mouseY

                    //绘制长方形
                    ctx.strokeRect(startX,startY,stopX-startX,stopY-startY)
                    ctx.stroke()
                }

            }
            //对框选目标进行操纵
            Rectangle{
                id:carryVehicleRect
                width: 100
                height: 200
                x:0
                y:0
                visible: false
                z:_mapAndVideo.z + 4
                Column{
                    spacing: 2
                    Button{
                        text: "Arm"
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                QGroundControl.multiVehicleManager.setCarryVehicleArmd()
                                carryVehicleRect.visible=false
                            }
                        }
                    }
                    Button{
                        text: "DisArm"
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                QGroundControl.multiVehicleManager.setCarryVehicleDisarmd()
                                carryVehicleRect.visible=false
                            }
                        }
                    }
                }
            }
            MouseArea{
                id:area
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton| Qt.RightButton
                //实现框选多个载具功能
                onPressed: {
                    if(mouse.button == Qt.RightButton)
                    {
                        pressedPonit = _fMap.toCoordinate(Qt.point(mouse.x, mouse.y), false /* clipToViewPort */)
                        startX = mouse.x;
                        startY = mouse.y;
                        isMouseMoveEnable = true
                        console.log(pressedPonit.latitude,pressedPonit.longitude)
                    }
                }
                onReleased: {
                    if(mouse.button == Qt.RightButton)
                    {
                        relasedPonit = _fMap.toCoordinate(Qt.point(mouse.x, mouse.y), false /* clipToViewPort */)
                        carryVehicleRect.x=mouse.x-carryVehicleRect.width
                        carryVehicleRect.y=mouse.y
                        carryVehicleRect.visible=true
                        console.log(relasedPonit.latitude,relasedPonit.longitude)
                        //调用判断框选中载具
                        QGroundControl.multiVehicleManager.getCarryVehicleId(pressedPonit.latitude,pressedPonit.longitude,relasedPonit.latitude,relasedPonit.longitude)
                        isMouseMoveEnable = false
                        canvas.requestPaint()      //当鼠标released时，调用绘制paint
                    }
                }
                //当鼠标press位置改变，调用本函数
                onPositionChanged: {
                    if (isMouseMoveEnable){
                        canvas.requestPaint()   //绘制函数
                    }
                }
                //解决添加蒙层后阻断FlightDisplayViewMap页面点击按钮事件
                //具体效果待测试
                onClicked: {
                    _fMap.clickFlightDisplayView()
                }
            }
        }