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

这篇具有很好参考价值的文章主要介绍了15. Canvas制作汽车油耗仪表盘。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 说明

本篇文章在14. 利用Canvas组件制作时钟的基础上进行一些更改,想查看全面的代码可以点击链接查看即可。
效果展示:
15. Canvas制作汽车油耗仪表盘,QT_QML自封装控件库,qml,仪表盘,canvas文章来源地址https://www.toymoban.com/news/detail-666090.html

2. 整体代码

import QtQuick 2.15
import QtQuick.Controls 2.15

Item{
    id:root
    implicitWidth: 400
    implicitHeight: implicitWidth

    // 尺寸属性
    property real outerCircleRadius:root.width / 2.05
    property 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 seconds
    property alias secondsAngle:secondLine.angle

    // 绘制背景
    Canvas{
        id:bgCircle
        width: root.width
        height: root.height
        anchors.centerIn: parent
        onPaint: {
            // 绘制背景
            var ctx = getContext("2d")  
            ctx.save()
            ctx.lineWidth = root.width/50   
            ctx.fillStyle = bgColor
            ctx.beginPath()
            ctx.arc(root.width/2,root.height/2,outerCircleRadius,Math.PI * (5/6),Math.PI * (1/6))
            ctx.fill()
            ctx.restore()
        }
    }
    // 绘制圆环轮廓
    Canvas{
        id:outerCircle
        width: root.width
        height: root.height
        anchors.centerIn: parent
        onPaint: {
            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:secondLine
        width: root.width
        height: root.height
        anchors.centerIn: parent
        property 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/100
            ctx.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:innerCircle
        width: root.width
        height: root.height
        anchors.centerIn: parent
        property 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 = innerRootColor
            ctx.beginPath()
            ctx.arc(root.width/2,root.height/2,innerCircleRadius/8,0,endAngle)
            ctx.fill()
            ctx.restore()
        }
    }
    // 绘制刻度线
    Canvas{
        id:innerLine
        width: root.width
        height: root.height
        anchors.centerIn: parent
        property real lineNums:60
        onPaint: {
            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/100
                    ctx.strokeStyle = innerLineColorL
                }else if(i >= 25 && i <= 30){
                    ctx.strokeStyle = "red"
                }
                else{
                    ctx.lineWidth = root.width/200
                    ctx.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:drawText
        width: root.width
        height: root.height
        anchors.centerIn: parent
        property 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 = textColor
                var 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()
                    break
                case 7:
                    ctx.fillText(0,root.width/2 + dx,root.height / 2 + dy);
                    ctx.fill()
                    break
                case 11:
                    ctx.fillText("1/2",root.width/2 + dx,root.height / 2 + dy);
                    ctx.fill()
                    break
                default:
                    break
                }
            }
        }
    }
    Image{
        id:iconImg
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 5
        scale: 0.25
        source: "qrc:/油箱.png"
    }
}

到了这里,关于15. Canvas制作汽车油耗仪表盘的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ChatGPT实现仪表盘生成

    Grafana是开源社区最流行的数据可视化软件,一定程度上也和 superset 一起被视为 tableau 等商业 BI 的开源替代品,很多IT 团队、科研团队,都会使用 Grafana 来做数据监控、挖掘分析。Grafana社区也有很多贡献者,在 github 上分享自己针对不同场景制作的数据分析仪表盘效果和配置

    2024年02月02日
    浏览(36)
  • QML 仪表盘小示例

    本次项目已发布在CSDN-GitCode,下载方便,安全,可在我主页进行下载即可,后面的项目和素材都会发布这个平台。 个人主页:https://gitcode.com/user/m0_45463480 怎么下载:在项目中点击克隆,windows:zip linux:tar.gz tar # .pro

    2024年02月05日
    浏览(44)
  • Prometheus + Grafana 搭建监控仪表盘

    目标要求 1、需要展现的仪表盘: SpringBoot或JVM仪表盘 Centos物理机服务器(实际为物理分割的虚拟服务器)仪表盘 2、展现要求: 探索Prometheus + Grafana搭建起来的展示效果,尽可能展示能展示的部分。 监控系统核心:prometheus-2.45.0.linux-amd64.tar 下载地址:https://github.com/prometheus

    2024年04月23日
    浏览(47)
  • 安装istio和部署实例以及仪表盘

    安装Istio 接下来我们将介绍如何在 Kubernetes 集群中安装 Istio,这里我们使用的是最新的 1.10.3 版本。 下面的命令可以下载指定的 1.10.3 版本的 Istio: 如果安装失败,可以用手动方式进行安装,在 GitHub Release 页面获取对应系统的下载地址: 其中 samples/ 目录下面是一些示例应用程

    2024年02月13日
    浏览(43)
  • 纯JS+Vue实现一个仪表盘

    在使用canvas的时候发现数值变化,每次都要重新渲染,值都从0开始,这和我的需求冲突。 利用 border-radius ,就可将正方形变成圆形 一共100个值,每两个刻度就要有线,到10线的长度会更长一点。其实和画钟表一样,0的位置是坐标轴的225°,到100的位置,总共是180°+45° 静下心

    2024年02月14日
    浏览(50)
  • QPaint绘制自定义仪表盘组件01

    网上抄别人的,只是放这里自己看一下,看完就删掉 ui Dashboard.pro  mainwindow.h  mainwindow.cpp main.cpp 

    2024年02月22日
    浏览(40)
  • 【监控仪表系统】Grafana 中文入门教程 | 构建你的第一个仪表盘

    Grafana 读音:/grəˈfɑːnˌɑː/ 在大厂工作久了,时常对一些工具的存在觉得理所当然。 比如说,需要计算资源的时候,一个配置文件就可以要来两百台虚拟化好的机子。需要试下缓存?点下鼠标就可以要到几十个配置好的 Redis 结点。 最省心的是,这些工具都已经根据工作流

    2024年02月02日
    浏览(44)
  • 微信小程序 纯css画仪表盘

    刚看到设计稿的时候第一时间想到的就是用 canvas 来做这个仪表盘,虽然本人的画布用的不是很好但还可以写一写😀。话不多说直接上代码。最后有纯 css 方法 到此仪表盘就画完了,最后需求有变动需要再仪表盘上加文本,众所周知 canvas 在小程序中的层级很高。但是官方说

    2024年02月04日
    浏览(46)
  • 微信小程序实现带刻度简易仪表盘

    实现如图样式的仪表盘,要求分数向下取整、进度精确展示。 1、首先画出环形进度条,通过大圆包小圆的方式实现:大圆(circle1)背景浅色,小圆(circle2)背景白色 2、在小圆内部画刻度,根据UI图确认一共有12个刻度,其中长短刻度交叉显示(如图), 定义一个长度为1

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包