qml-样例：制作磁罗盘

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 1.4

Window {
    id: _root
    visible: true
    width: 640
    height: width
    title: qsTr("Hello World")


    property real size:     200

    property var _heading: 90
    property var vehicle: null

    Rectangle {
        id:             borderRect
        width: 200
        height: width
        anchors.centerIn: parent

        radius:         width / 2
        color:          "gray"
        border.color:   "black"
        border.width:   2
    }
    Item {
        id:             instrument
        anchors.fill:   parent
        visible:        true

        Image {     // 飞机指向图标
            id:                 pointer
            width:              size * 0.65
            source:             vehicle ? "" : "qrc:/qml/compassInstrumentArrow.svg"
            mipmap:             true
            sourceSize.width:   width
            fillMode:           Image.PreserveAspectFit
            anchors.centerIn:   parent
            transform: Rotation {
                origin.x:       pointer.width  / 2
                origin.y:       pointer.height / 2
                angle:          _heading
            }
        }

        Rectangle { // 显示heading的值
            anchors.centerIn:   parent
            width:              size * 0.15
            height:             size * 0.1
            border.color:       "black"
            color:              "gray"
            opacity:            0.65

            Label {
                text:               _headingString3
                font.family:        "opensans"
                font.pointSize:     8
                color:              "black"
                anchors.centerIn:   parent

                property string _headingString3:  _heading
            }
        }
    } //

    Image {       // 有的
        id:                 image
        z: 5
        smooth:             true
        mipmap:             true
        antialiasing:       true
        visible:            true
        fillMode:           Image.PreserveAspectFit
        anchors.fill:       borderRect
        sourceSize.height:  borderRect.height
        source:             "qrc:/qml/compassInstrumentDial.svg"
        transform: Rotation {
            origin.x:       image.width  / 2
            origin.y:       image.height / 2
            angle:          0
        }

    }

    Slider {
          maximumValue: 360
          stepSize: 1.0
          value: _heading
          onValueChanged:
          {
              _heading = value
          }
      }
}