15. Canvas制作汽车油耗仪表盘

1. 说明

本篇文章在14. 利用Canvas组件制作时钟的基础上进行一些更改，想查看全面的代码可以点击链接查看即可。
效果展示：
在这里插入图片描述

2. 整体代码

import QtQuick 2.15
import QtQuick.Controls 2.15Item{id:rootimplicitWidth: 400implicitHeight: implicitWidth// 尺寸属性property real outerCircleRadius:root.width / 2.05property real innerCircleRadius:root.width / 2.05// 颜色属性property color bgColor:Qt.rgba(0,0,0,0)property color outerColor:"black"property color innerColor:"black"property color innerRootColor:"lightSlateGray"property color innerLineColorL:Qt.rgba(1,1,1,1)property color innerLineColorS:Qt.rgba(1,1,1,0.8)property color textColor:"white"property color secondLineColor:"red"// 指针property var secondsproperty alias secondsAngle:secondLine.angle// 绘制背景Canvas{id:bgCirclewidth: root.widthheight: root.heightanchors.centerIn: parentonPaint: {// 绘制背景var ctx = getContext("2d")  ctx.save()ctx.lineWidth = root.width/50   ctx.fillStyle = bgColorctx.beginPath()ctx.arc(root.width/2,root.height/2,outerCircleRadius,Math.PI * (5/6),Math.PI * (1/6))ctx.fill()ctx.restore()}}// 绘制圆环轮廓Canvas{id:outerCirclewidth: root.widthheight: root.heightanchors.centerIn: parentonPaint: {var ctx = getContext("2d")  //创建画师//为画师创建画笔并设置画笔属性ctx.lineWidth = root.width/50   //设置画笔粗细ctx.strokeStyle = outerColor    //设置画笔颜色ctx.beginPath()     //每次绘制调用此函数，重新设置一个路径// 按照钟表刻度进行划分，一圈是Math.PI * 2,分成12个刻度，每个刻度占用 1/6// canvas绘制圆弧，是按照顺时针绘制，起点默认在三点钟方向ctx.arc(root.width/2,root.height/2,outerCircleRadius,Math.PI * (5/6),Math.PI * (1/6))ctx.stroke()    //根据strokeStyle对边框进行描绘}}// 绘制秒针线Canvas{id:secondLinewidth: root.widthheight: root.heightanchors.centerIn: parentproperty real angle:Math.PI * (8/6)onPaint: {var ctx = getContext("2d")ctx.clearRect(0,0,width,height)ctx.save()ctx.beginPath()ctx.lineWidth = root.width/100ctx.strokeStyle=secondLineColor// 平移坐标点(注意：坐标系原点先平移，再旋转)ctx.translate(root.width/2,root.height/2)// 旋转坐标系ctx.rotate(angle)// 坐标原点变化之后再进行实际的绘图ctx.moveTo(0,-10);ctx.lineTo(0,outerCircleRadius / 1.5);ctx.stroke()ctx.restore()}}// 绘制圆环内衬Canvas{id:innerCirclewidth: root.widthheight: root.heightanchors.centerIn: parentproperty real endAngle:Math.PI * (12/6)onPaint: {var ctx = getContext("2d")  ctx.save()ctx.lineWidth = root.width/50   ctx.strokeStyle = innerColor     ctx.beginPath()     ctx.arc(root.width/2,root.height/2,innerCircleRadius,Math.PI * (5/6),Math.PI * (1/6))ctx.stroke()    ctx.restore()// 绘制指针根部圆圈ctx.save()ctx.lineWidth = root.width/50   ctx.fillStyle = innerRootColorctx.beginPath()ctx.arc(root.width/2,root.height/2,innerCircleRadius/8,0,endAngle)ctx.fill()ctx.restore()}}// 绘制刻度线Canvas{id:innerLinewidth: root.widthheight: root.heightanchors.centerIn: parentproperty real lineNums:60onPaint: {var ctx = getContext("2d")  for (var i = 0; i <= lineNums; ++i){if(i > 5 && i < 25){continue}ctx.beginPath();var angle = 2 * Math.PI / 60 * i;var dx = Math.cos(angle)*(outerCircleRadius-15);var dy = Math.sin(angle)*(outerCircleRadius-15);var dx2 = Math.cos(angle)*(outerCircleRadius-7);var dy2 = Math.sin(angle)*(outerCircleRadius-7);if (i % 5 === 0 && i != 25 && i != 30){ctx.lineWidth = root.width/100ctx.strokeStyle = innerLineColorL}else if(i >= 25 && i <= 30){ctx.strokeStyle = "red"}else{ctx.lineWidth = root.width/200ctx.strokeStyle = innerLineColorS}ctx.moveTo(root.width/2+dx,root.height/2+dy);ctx.lineTo(root.width/2+dx2,root.height/2+dy2);ctx.stroke();}}}// 绘制数字Canvas{id:drawTextwidth: root.widthheight: root.heightanchors.centerIn: parentproperty var numbers : [1,2,3,4,5,6,7,8,9,10,11,12]onPaint: {var ctx = getContext("2d")ctx.font = "18px Arial";ctx.textAlign = "center";ctx.textBaseline = "middle";for(var i = 0; i < 12; ++i){ctx.fillStyle = textColorvar angle = 2 * Math.PI / 12 * numbers[i] - 3.14 / 2;var dx = Math.cos(angle)*(outerCircleRadius-35);var dy = Math.sin(angle)*(outerCircleRadius-35);switch(i){case 3:ctx.fillText(1,root.width/2 + dx,root.height / 2 + dy);ctx.fill()breakcase 7:ctx.fillText(0,root.width/2 + dx,root.height / 2 + dy);ctx.fill()breakcase 11:ctx.fillText("1/2",root.width/2 + dx,root.height / 2 + dy);ctx.fill()breakdefault:break}}}}Image{id:iconImganchors.horizontalCenter: parent.horizontalCenteranchors.top: parent.topanchors.topMargin: 5scale: 0.25source: "qrc:/油箱.png"}
}