QML 指南方向條 (類似喫雞的指南方向條）控件

QML 指南方向條 (類似喫雞遊戲的指南方向條）控件

東南西北帶刻度
如圖 ：代表 東 90° 方向

上控件代碼：DirectionLine.qml

import QtQuick 2.9
import QtQuick.Window 2.2

import QtQuick.Controls 2.4


Item {
    id:root
    width: 720
    height: 20


    //----方向--------
    property int direction:0


    //---360刻度指南針---------------------------------------------------------
    property var directionModel:[
        "N",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "NE",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "E",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "SE",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "S",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "SW",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "W",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "NW",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".",".",
        "|",".",".",".",".",".",".",".",".",".",".",".",".",".","."
    ]

    property var scalerModel: [
        "N","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "NE","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "E","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "SE","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "S","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "SW","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "W","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "NW","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","","",
        "|","","","","","","","","","","","","","",""
    ]

    PathView{
        id:myPathView
        height: root.height
        width: root.width

        delegate:itemWrap

        model: scalerModel
        currentIndex: direction

        path:pathHorizontal

        pathItemCount: 100
        preferredHighlightBegin: 0.5;
        preferredHighlightEnd: 0.5;
        highlightRangeMode: PathView.StrictlyEnforceRange;

        //交互屬性，支持拖動等……
        interactive: true
        //滑動速度
        maximumFlickVelocity:500

        onMovementEnded: {
            //--發出信號
            //console.log(myPathView.currentIndex)
            positionViewAtIndex(myPathView.currentIndex, PathView.Center)
        }


    }//PathView

    Path {
        id:pathHorizontal


        startX: 0
        startY: root.height/2

        //--沿着線性路徑連續變化--------------------------------------------------------
        PathLine { x: root.width; y: pathHorizontal.startY; }

        //--5個特殊點--------------------------------------------------------

        PathLine { x: 0; y: pathHorizontal.startY; }
        PathAttribute { name: "iconZ"; value: 1 }
        PathAttribute { name: "iconScale"; value: 0.6 }
        PathAttribute { name: "iconOpacity"; value: 0.3 }
        PathAttribute { name: "iconAngle"; value: 80  }
        PathPercent { value: 0 }

        // start scaling up
        PathLine { x: root.width/4.0; y: pathHorizontal.startY; }
        PathAttribute { name: "iconZ"; value: 2 }
        PathAttribute { name: "iconScale"; value: 0.8 }
        PathAttribute { name: "iconOpacity"; value: 0.4 }
        PathAttribute { name: "iconAngle"; value: 50  }
        PathPercent { value: 0 }

        // middle point
        PathLine {
            x: root.width/2.0;
            y: pathHorizontal.startY;}
        PathAttribute { name: "iconZ"; value: 5 }
        PathAttribute { name: "iconScale"; value: 1.0 }
        PathAttribute { name: "iconOpacity"; value:1.0 }
        PathAttribute { name: "iconAngle"; value: 0  }
        PathPercent { value: 1/2}

        // start scaling down
        PathLine { x:root.width/4.0*3; y: pathHorizontal.startY; }
        PathAttribute { name: "iconZ"; value: 2 }
        PathAttribute { name: "iconScale"; value: 0.8}
        PathAttribute { name: "iconOpacity"; value: 0.4 }
        PathAttribute { name: "iconAngle"; value: -50  }
        PathPercent { value: 1.0 }

        // last point
        PathLine { x:  root.width; y: pathHorizontal.startY ; }
        PathAttribute { name: "iconZ"; value: 1 }
        PathAttribute { name: "iconScale"; value: 0.6 }
        PathAttribute { name: "iconOpacity"; value:0.3 }
        PathAttribute { name: "iconAngle"; value: -80  }
        PathPercent { value: 1}

     }



    Component{
        id:itemWrap

        Item{
            id:item
            width: 20
            height:20

            scale: PathView.iconScale
            opacity: PathView.iconOpacity
            z:PathView.iconZ

            transform: Rotation {
                id: rotation

                origin.x:item.width/2
                origin.y: item.height/2
                axis.x: 1
                axis.y: 0
                axis.z: 0
                angle: item.PathView.iconAngle
            }

            Text {
                id: name

                anchors.centerIn: parent
                text: modelData
                color: item.PathView.isCurrentItem?"red": "white"
                font.pixelSize: 20

            }

        }




    }


    Text {
        id: valueText
        anchors.centerIn: myPathView
        anchors.verticalCenterOffset: 30

        text:  getDirectionText(direction) + "°"
        color:"red"
        font.pixelSize: 20

    }


//    //Slider
//    Slider {
//        id:silder
//        y:400
//        width: 720
//        from: 0
//        value: 0
//        to: 360
//        stepSize: 1.0

//         onValueChanged: {
//             myPathView.currentIndex = value
//         }
//     }



    function getDirectionText(direction){
        //東南西北
        if(direction<22.5||direction>=337.5&&direction<360){
            return "北" +direction
        }else if(direction>=22.5&&direction<67.5){
            return "東北" +direction
        }else if(direction>=67.5&&direction<112.5){
            return "東" +direction
        }else if(direction>=112.5&&direction<157.5){
            return "東南" +direction
        }else if(direction>=157.5&&direction<202.5){
            return "南" +direction
        }else if(direction>=202.5&&direction<247.5){
            return "西南" +direction
        }else if(direction>=247.5&&direction<292.5){
            return "西" +direction
        }else if(direction>=292.5&&direction<337.5){
            return "西北" +direction
        }

        //default
        return "北" +0
    }



}

在其它地方調用 DirectionLine

Item{
    id:root
    width:  1920
    height: 720


    DirectionLine{
        anchors.centerIn: parent
    }
}