[QML開發筆記]-QML繪製儀表盤

[QML開發筆記]-QML繪製儀表盤

使用QML繪製儀表盤，主要是因爲使用QPainter繪製控件繪製習慣了，使用QML也要繪製一個試試。總體感覺，QML繪製起來還是挺方便的，QML自帶的儀表盤控件功能也挺強大，隨後會使用QML自帶的儀表盤進行開發使用。

效果：

代碼：

MyCircularGauge.qml

import QtQuick 2.0

/**
* @FileName      MyCircularGauge.qml
* @brief         CircularGauge
* @author        Kongdemin
* @date          2020-04-24
*/

Rectangle {
    id: control
    color: 'white'
    
    property real radius: control.width > control.height ? control.height/2-10 : control.width/2-10
    property real currenValue: 0

    onCurrenValueChanged: {
        canvas.requestPaint()
    }

    Canvas {
        id: canvas
        antialiasing: true
        anchors.fill: parent
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset();
            ctx.lineWidth = 3
            ctx.strokeStyle = "black"
            ctx.fillStyle = "black"
            ctx.font = "20px SimHei bold"
            ctx.lineCap = "round"
            ctx.translate(width/2, height/2)

            //繪製外面
            ctx.save()
            ctx.beginPath()
            ctx.arc(0,0,control.radius,0,Math.PI*2,true)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.restore()

            //繪製內圓
            ctx.save()
            ctx.strokeStyle = "grey"
            ctx.fillStyle = "grey"
            ctx.beginPath()
            ctx.arc(0,0,15,0,Math.PI*2,true)
            ctx.fill()
            ctx.stroke()
            ctx.restore()

            //繪製刻度
            ctx.save()
            ctx.lineWidth = 2
            ctx.strokeStyle = "white"
            ctx.fillStyle = "white"
            ctx.rotate(Math.PI/6)
            ctx.beginPath()
            for (var i=0; i<=220/2; i++){
                if(i%5==0){
                    ctx.moveTo(0,control.radius)
                    ctx.lineTo(0,control.radius-15)
                    ctx.save()
                    ctx.translate(0, control.radius-25)
                    ctx.fillText(String(i*2), 0, 0)
                    ctx.restore()
                }
                else{
                    ctx.moveTo(0,control.radius)
                    ctx.lineTo(0,control.radius-5)
                }
                ctx.rotate((Math.PI*2-Math.PI/3)/220*2)
            }
            ctx.stroke()
            ctx.restore()

            //繪製指針
            ctx.save()
            ctx.strokeStyle = "red"
            ctx.fillStyle = "red"
            ctx.rotate(Math.PI/6)
            ctx.rotate(((Math.PI*2-Math.PI/3)/220*2)*(control.currenValue/2))
            ctx.beginPath()
            ctx.lineTo(0,0)
            ctx.lineTo(8,20)
            ctx.lineTo(0,control.radius-35)
            ctx.lineTo(-8,20)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.restore()

            //繪製當前速度值
            ctx.save()
            ctx.fillStyle = "white"
            ctx.font = "40px SimHei bold"
            ctx.fillText(String(currenValue)+"km/h",-50,control.radius/2)
            ctx.restore()
        }
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.13
/**
* @FileName      main.qml
* @brief         CircularGauge
* @author        Kongdemin
* @date          2020-04-24
*/
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("CircularGauge")

    Column {
        anchors.fill: parent
        MyCircularGauge {
            id: gaugeColumn1
            //color: 'teal'
            width: parent.width
            height: parent.height-valueSlider.height
        }

        Slider {
            id: valueSlider;
            width: parent.width
            from: 0
            to: 220
            stepSize: 1
            onValueChanged: {
                gaugeColumn1.currenValue = valueSlider.value
            }
        }
    }
}