qml中使用canvas绘制温度计

网上只找到一篇vip文章，没钱充会员，只能自己画了

使用环境QT5.12.7

main.qml代码如下

// An highlighted block
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 400
    height: 680
    title: qsTr("Hello World")

    Rectangle {
        id: rect1
        width: 200
        height: 600
        anchors.centerIn: parent
        color: "gray"
        Canvas{
            id:myCanvas
            width: parent.width
            height: parent.height
            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d");

                //起始角度，结束角度
                var beginAng = 1.35*Math.PI
                var endAng = 1.65*Math.PI

                var allH = 500//圆和柱连接点高
                var allw = 100//柱顶端高
                var r = 10//圆半径

                var cT = 0;//当前温度


                var minTemperature = -50 //最小温度
                var maxTemperature = 110 //最大温度

                var intervalGrid = (parseInt(maxTemperature/10)-parseInt(minTemperature/10))*2 //从最小值到最大值有多少个格子
                var intervalDistanse = (400-50)/intervalGrid //每个格子的距离

                cT = cT>maxTemperature?maxTemperature:(cT<minTemperature?minTemperature:cT) // 限制温度计超出

                var currentTemperature = allH+r*Math.cos(120-beginAng)-(10 + (cT-minTemperature)/10*intervalDistanse*2)//当前温度解析为填空柱高

                //柱边框
                ctx.beginPath();
                ctx.lineWidth=3;
                ctx.strokeStyle='#fff';
//                ctx.fillStyle="#f00";
//                ctx.moveTo(allw,allw)
                ctx.moveTo(allw+r*Math.sin(120-beginAng),allH+r*Math.cos(120-beginAng));
                ctx.lineTo(allw+r*Math.sin(120-beginAng),100);
                ctx.lineTo(allw-r*Math.sin(120-beginAng),100);
                ctx.lineTo(allw-r*Math.sin(120-beginAng),allH+r*Math.cos(120-beginAng));
                ctx.stroke();
//                ctx.fill();
                ctx.font = "18px bold 黑体";
                // 设置颜色
                ctx.fillStyle = "#ff0";
                // 设置水平对齐方式
                ctx.textAlign = "center";
                // 设置垂直对齐方式
                ctx.textBaseline = "middle";
                // 绘制文字（参数：要写的字，x坐标，y坐标）
                ctx.fillText("℃", allw+r*Math.sin(120-beginAng)+20,100-20);
                ctx.fillText("℉", allw-r*Math.sin(120-beginAng)-20,100-20);


                ctx.closePath()

                //右刻度
                for(var i=0;i<=intervalGrid;i++){
                    ctx.beginPath();
                    ctx.lineWidth=2;
                    if(i%2==0){
                        ctx.strokeStyle='#fff';
                        ctx.moveTo(allw+r*Math.sin(120-beginAng),allH+r*Math.cos(120-beginAng)-10-i*intervalDistanse)
                        ctx.lineTo(allw+r*Math.sin(120-beginAng)+20,allH+r*Math.cos(120-beginAng)-10-i*intervalDistanse)
                        ctx.font = "18px bold 黑体";
                        // 设置颜色
                        ctx.fillStyle = "#ff0";
                        // 设置水平对齐方式
                        ctx.textAlign = "center";
                        // 设置垂直对齐方式
                        ctx.textBaseline = "middle";
                        // 绘制文字（参数：要写的字，x坐标，y坐标）
                        ctx.fillText(minTemperature+10*i/2, allw+r*Math.sin(120-beginAng)+45,allH+r*Math.cos(120-beginAng)-10-i*intervalDistanse);
                    }else{
                        ctx.strokeStyle='#fee';
                        ctx.moveTo(allw+r*Math.sin(120-beginAng),allH+r*Math.cos(120-beginAng)-10-i*intervalDistanse)
                        ctx.lineTo(allw+r*Math.sin(120-beginAng)+10,allH+r*Math.cos(120-beginAng)-10-i*intervalDistanse)
                    }
                    ctx.stroke()
                    ctx.closePath()
                }

                //左刻度
                for(var i=0;i<=intervalGrid;i++){
                    ctx.beginPath();
                    ctx.lineWidth=2;
                    if(i%2==0){
                        ctx.strokeStyle='#fff';
                        ctx.moveTo(allw-r*Math.sin(120-beginAng),allH+r*Math.cos(120-beginAng)-10-i*intervalDistanse)
                        ctx.lineTo(allw-r*Math.sin(120-beginAng)-20,allH+r*Math.cos(120-beginAng)-10-i*intervalDistanse)
                        ctx.font = "18px bold 黑体";
                        // 设置颜色
                        ctx.fillStyle = "#ff0";
                        // 设置水平对齐方式
                        ctx.textAlign = "center";
                        // 设置垂直对齐方式
                        ctx.textBaseline = "middle";
                        // 绘制文字（参数：要写的字，x坐标，y坐标）
                        ctx.fillText(32+(minTemperature+10*i/2)*1.8, allw-r*Math.sin(120-beginAng)-45,allH+r*Math.cos(120-beginAng)-10-i*intervalDistanse);
                    }else{
                        ctx.strokeStyle='#fee';
                        ctx.moveTo(allw-r*Math.sin(120-beginAng),allH+r*Math.cos(120-beginAng)-10-i*intervalDistanse)
                        ctx.lineTo(allw-r*Math.sin(120-beginAng)-10,allH+r*Math.cos(120-beginAng)-10-i*intervalDistanse)
                    }
                    ctx.stroke()
                    ctx.closePath()
                }




                //柱填充
                ctx.beginPath();

                ctx.lineWidth=3;
                ctx.strokeStyle='#fff';
                ctx.fillStyle="#f00";
//                ctx.moveTo(allw,allw)
                ctx.moveTo(allw+r*Math.sin(120-beginAng),allH+r*Math.cos(120-beginAng));
                ctx.lineTo(allw+r*Math.sin(120-beginAng),currentTemperature);
                ctx.lineTo(allw-r*Math.sin(120-beginAng),currentTemperature);
                ctx.lineTo(allw-r*Math.sin(120-beginAng),allH+r*Math.cos(120-beginAng));
                ctx.stroke();
                ctx.fill();

                ctx.closePath()

                //圆填充
                ctx.beginPath();
                ctx.lineWidth=3;
                ctx.strokeStyle='#fff';
                ctx.fillStyle="#f00";
                ctx.arc(allw,allH,r,beginAng,endAng,true);
                ctx.stroke();
                ctx.fill();
                ctx.closePath()
            }
        }
    }

}