当前位置: 首页 > news >正文

微信小程序 纯css画仪表盘

在这里插入图片描述

刚看到设计稿的时候第一时间想到的就是用canvas来做这个仪表盘,虽然本人的画布用的不是很好但还可以写一写😀。话不多说直接上代码。最后有纯css方法

<!--wxml-->
<canvas canvas-id="circle" class="circle" >
// js
data: {canvasWidth: 285, // 画布宽度canvasHeight: 285, // 画布高度value: 60, // 当前得分
},/** 绘制仪表盘*/showCanvasRing() {var that = this;var ctx = wx.createCanvasContext("circle");ctx.clearRect(0, 0, that.data.canvasWidth, that.data.canvasHeight); // 清除画布var circle_r = that.data.canvasWidth / 2; //画布的一半,用来找中心点和半径var scoreText = that.data.value>=100?100:that.data.value; // 当前得分 最多100分var descript = '良好'; // 当前描述var date = formatTime(new Date(),'MM-DD'); // 当前日期// 圆弧起点var startAngle = 0.8 * Math.PI;var endAngle = 2.2 * Math.PI;//定义起始点ctx.translate(that.data.canvasWidth / 2, that.data.canvasHeight / 2);// 画圆背景ctx.beginPath();ctx.setStrokeStyle("#6bb7b9");ctx.fillStyle="#6bb7b9";ctx.setLineCap("round");ctx.arc(0, 0, circle_r,2*Math.PI);ctx.fill()ctx.stroke();ctx.closePath();//  白半边圆弧ctx.beginPath();ctx.setStrokeStyle("#FFFFFF");ctx.setLineWidth(10);ctx.setLineCap("round");ctx.arc(0, 0, circle_r - 20, startAngle, endAngle, false);ctx.stroke();ctx.closePath();// 刻度for (let i = 0; i <= 10; i++) {let angle = startAngle + (endAngle - startAngle - 0.1) * (i * 10) / 100;if (angle > Math.PI * 2) {angle = angle - Math.PI * 2}const point = that.getPoint(0, 0, circle_r - 44, angle);const PI_3_2 = Math.PI * 1.5;const PI_1_2 = Math.PI * 0.5;ctx.save()ctx.setFillStyle("#fff");ctx.setFontSize(13);ctx.translate(point.x, point.y)const rotateDegrees = angle >= PI_3_2 ? (angle - PI_3_2) : (angle + PI_1_2);ctx.rotate(rotateDegrees)ctx.fillText(i * 10, 0, 0)ctx.restore()}// 当前得分内圆弧ctx.beginPath();ctx.setStrokeStyle("#FFA64D");ctx.setLineWidth(10);ctx.setLineCap("round");ctx.arc(0, 0, circle_r - 20, startAngle, startAngle + (endAngle - startAngle) * scoreText / 100, false);ctx.stroke();ctx.closePath();// 分数ctx.setTextAlign("center"); // 字体位置ctx.setFillStyle("#fff");ctx.font = "900 50px Arial"ctx.fillText(scoreText, 0, -20);// 描述ctx.setTextAlign("center"); // 字体位置ctx.font = "400 15px Arial"ctx.fillText(descript, 0, 15);// 日期ctx.setTextAlign("center");ctx.setLineWidth(8);ctx.setFontSize(14);ctx.fillText(date + ' 更新', 0, 35);// 绘图ctx.draw();},getPoint: function (x, y, r, angle) {const x1 = x + r * Math.cos(angle);const y1 = y + r * Math.sin(angle);return {x: x1,y: y1}},

到此仪表盘就画完了,最后需求有变动需要再仪表盘上加文本,众所周知canvas在小程序中的层级很高。但是官方说可以使用cover-view | cover-image

 <canvas canvas-id="circle" class="circle" ><cover-view class="lowScore" wx-if="{{showView}}">目前信用分过低</cover-view></canvas>

经过验证cover-view可以做到在canvas上悬浮,但是不能满足所有需求;
比如要悬浮scroll-view ,总不能把内容全部用画布来写吧 ~ ~。也有人说可以将绘画完成后的canvas转成图片进行显示wx.canvasToTempFilePath。我同样也试过但是会报错:canvasToTempFilePath:fail fail canvas is empty,怎么解决试了好半天,由于项目着急也没用太多时间研究了。所有最后我决定使用最原始的方法来实现。来看代码吧 ↓ ↓

 <!--wxml-->
<view class="dashboard"><view class="dashboard-arc"><view class="dashboard-scale"><view wx:for="{{[0,10,20,30,40,50,60,70,80,90,100]}}" wx:key="item">{{item}}</view></view><view class="dashboard-arc-active" style="background: conic-gradient(#FFA64D 0, #FFA64D {{(value*0.75)}}%, transparent 0, transparent);"><view class="dashboard-arc-active-end" style="transform: translateX(-50%) rotate({{(value/100)*270}}deg);"></view></view></view><view class="dashboard-content"><view class="dashboard-content-title">{{value}}</view><view class="dashboard-content-text">{{state}}</view><view class="dashboard-content-desc">{{tool.formatTime(date,'MM-DD')}} 更新</view></view><view class="lowScore" wx-if="{{showView}}">目前信用分过低</view>
...要悬浮的内容
</view>
	/* 仪表盘 */.dashboard {width: 750rpx;height: 600rpx;background: rgba(70, 165, 168, 1);box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);text-align: center;position: relative;}.dashboard::before{content: '';width: 570rpx;height: 570rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #6bb7b9;border-radius: 50%;}.dashboard-arc{width: 520rpx;height: 520rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transform: translate(-50%, -50%) rotate(-135deg);border-radius: 50%;background: conic-gradient(#fff 0, #fff 75%, transparent 0, transparent);}.dashboard-arc::before,.dashboard-arc::after{content: "";position: absolute;width: 20rpx;height: 20rpx;border-radius: 50%;background: #fff;}.dashboard-arc::before{left: 50%;top: 0;background-color: #FFA64D;transform: translateX(-50%);}.dashboard-arc::after{left: 0;top: 50%;transform: translateY(-50%);}.dashboard-arc-active{position: absolute;width: 100%;height: 100%;border-radius: 50%;top: 0;left: 0;}.dashboard-arc-active-end{position: absolute;width: 20rpx;height:100%;top: 0;left: 50%;z-index: 1;}.dashboard-arc-active-end::before{content: '';width: 20rpx;height: 20rpx;position: absolute;top: 0;left: 0;background: #FFA64D;border-radius: 50%;}.dashboard-scale{background-color: #6bb7b9;width: 480rpx;height: 480rpx;border-radius: 50%;position: relative;top: 50%;left: 50%;z-index: 99;font-size: 20rpx;transform: translate(-50%, -50%);color: #fff;}.dashboard-scale>view{position: absolute;top: 50%;height:calc(100% - 10rpx);left: 50%;transform: translate(-50%,-50%);}.dashboard-scale>view:nth-child(2){transform:translate(-50%,-50%)rotate(27deg);}.dashboard-scale>view:nth-child(3){transform:translate(-50%,-50%)rotate(54deg);}.dashboard-scale>view:nth-child(4){transform:translate(-50%,-50%)rotate(81deg);}.dashboard-scale>view:nth-child(5){transform:translate(-50%,-50%)rotate(108deg);}.dashboard-scale>view:nth-child(6){transform:translate(-50%,-50%)rotate(135deg);}.dashboard-scale>view:nth-child(7){transform:translate(-50%,-50%)rotate(162deg);}.dashboard-scale>view:nth-child(8){transform:translate(-50%,-50%)rotate(189deg);}.dashboard-scale>view:nth-child(9){transform:translate(-50%,-50%)rotate(216deg);}.dashboard-scale>view:nth-child(10){transform:translate(-50%,-50%)rotate(243deg);}.dashboard-scale>view:nth-child(11){transform:translate(-50%,-50%)rotate(270deg);}.dashboard-content{position: absolute;width: 300rpx;height: 300rpx;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;border-radius: 50%;padding: 20rpx;}.dashboard-content-title{font-size: 115rpx;font-weight: 900;}.dashboard-content-text{font-size: 25rpx;}.dashboard-content-desc{font-size: 20rpx;}

以上就是所有代码了,觉得对你有用的话就点个赞吧 !
最后给大家推荐一个在线题库小程序包含了阿里云认证、腾讯云认证、华为云认证、思科认证、锐捷认证、瓴羊认证、红帽认证、软考、IT认证等等
请添加图片描述

相关文章:

微信小程序 纯css画仪表盘

刚看到设计稿的时候第一时间想到的就是用canvas来做这个仪表盘&#xff0c;虽然本人的画布用的不是很好但还可以写一写&#x1f600;。话不多说直接上代码。最后有纯css方法 <!--wxml--> <canvas canvas-id"circle" class"circle" >// js dat…...

成为AI产品经理——模型稳定性评估(PSI)

一、PSI作用 稳定性是指模型性能的稳定程度。 上线前需要进行模型的稳定性评估&#xff0c;是否达到上线标准。 上线后需要进行模型的稳定性的观测&#xff0c;判断模型是否需要迭代。 稳定度指标(population stability index ,PSI)。通过PSI指标&#xff0c;我们可以获得不…...

操作系统——进程同步

目录 一、信号量相关函数 1. 创建信号量集 2. 获取信号量集 3. 等待、通知信号量集 4. 控制信号量集 二、简单进程同步 1. 创建信号量集 2. P操作 3. V操作 4. 删除信号量集 5. 测试&#xff1a; 三、生产者与消费者 1. 创建、删除共享内存及信号量集 2. 单一生产…...

如何能够对使用ShaderGraph开发的Shader使用SetTextureOffset和SetTextureScale方法

假设在ShaderGraph中的纹理的引用名称为"_BaseMap"&#xff0c;同时对这个"_BaseMap"纹理使用了采样的节点"SampleTexture2D"&#xff0c;然后该采样节点的uv接入的TilingAndOffset节点&#xff0c;此时的关键步骤是新建一个Vector4属性&#xf…...

力扣572:另一棵树的子树

力扣572&#xff1a;另一棵树的子树 给你两棵二叉树 root 和 subRoot 。检验 root 中是否包含和 subRoot 具有相同结构和节点值的子树。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 二叉树 tree 的一棵子树包括 tree 的某个节点和这个节点的所…...

Linux系统中进程间通信(Inter-Process Communication, IPC)

文章目录 进程间通信介绍进程间通信目的进程间通信发展 管道什么是管道 匿名管道用fork来共享管道原理站在文件描述符角度-深度理解管道站在内核角度-管道本质管道读写规则管道特点 命名管道创建一个命名管道匿名管道与命名管道的区别命名管道的打开规则 命名管道的删除用命名管…...

【React + Typescript】使用WebPack包管理、各种扩展插件组成的初始模板,开源协议:CC-BY-4.0

React Typescript Webpack 模板 模板展示项目结构使用的部分扩展包页面配置代码Layout 公共容器组件路由Jspackage.json 开源模板下载TIP 模板展示 项目结构 使用的部分扩展包 &#x1f4c2; System ├── &#x1f4c2; Plugin │ ├── &#x1f4c4; file-loader | 在处…...

python 制作3d立体隐藏图

生成文件的3d图&#xff0c;例子&#xff1a; 文字&#xff1a; 隐藏图&#xff1a; 使用建议&#xff1a; &#xff11;、建议不用中文&#xff0c;因为中文太复杂&#xff0c;生成立体图效果不好。 &#xff12;、需要指定FONT_PATH&#xff0c;为一个ttf文件&#xff0c;…...

layui+ssm实现数据批量删除

layuissm实现数据的批量删除 //数据表格table.render({id: adminList,elem: #adminList,url: ctx "/admin/getAdminList", //数据接口cellMinWidth: 80,even: true,toolbar: #toolbarDemo,//头部工具栏limit: 10,//每页条数limits: [10, 20, 30, 40],defaultToolba…...

国产AI边缘计算盒子,双核心A55丨2.5Tops算力

边缘计算盒子 双核心A55丨2.5Tops算力 ● 2.5TopsINT8算力&#xff0c;支持INT8/INT4/FP16多精度混合量化。 ● 4路以上1080p30fps视频编解码&#xff0c;IVE模块独立提供图像基础算子加速。 ● 支持Caffe、ONNX/PyTorch深度学习框架&#xff0c;提供resnet50、yolov5等AI算…...

C++作业4

代码整理&#xff0c; 将学过的三种运算符重载&#xff0c;每个至少实现一个运算符的重载 代码&#xff1a; #include <iostream>using namespace std;class Stu {friend const Stu operator*(const Stu &L,const Stu &R);friend bool operator<(const Stu …...

计算机网络(二)| 物理层上 | 数据通信基础知识 调制 频率范围 信噪比

文章目录 1 物理层基本概念2.数据通信基础知识2.1 数据通信基本概念2.2 信道基本概念2.2.1 基带调制&#xff08;编码&#xff09;方式2.2.2 带通调制方式 2.3 信道的极限速率影响因素2.3.1 **频率范围**2.3.2 **信噪比** 内容笔记来源于谢希任老师《计算机网络》 物理层重点 …...

[STM32-1.点灯大师上线】

学习了江协科技的前4课&#xff0c;除了打开套件的第一秒是开心的&#xff0c;后面的时间都是在骂娘。因为51的基础已经几乎忘干净&#xff0c;c语言已经还给谭浩强&#xff0c;模电数电还有点底子&#xff0c;硬着头皮上吧。 本篇主要是讲述学习点灯的过程和疑惑解释。 1.工…...

Web测试自动化工具Selenium的使用

Web测试自动化工具Selenium的使用 Selenium是一个Web应用测试的自动化工具&#xff0c;它通过模拟点击实现对Web应用的功能测试。测试时&#xff0c;除了Selenium&#xff0c;还需要对应的浏览器驱动&#xff0c;如在Chrome实现自动点击&#xff0c;则需要chromedriver。 Sel…...

VUE2+THREE.JS 按照行动轨迹移动人物模型并相机视角跟随人物

按照行动轨迹移动人物模型并相机视角跟随人物 1. 初始化加载模型2. 开始移动模型3. 人物模型启动4. 暂停模型移动5. 重置模型位置6. 切换区域动画7. 摄像机追踪模型8. 移动模型位置9.动画执行 人物按照上一篇博客所设定的关键点位置&#xff0c;匀速移动 1. 初始化加载模型 //…...

Hadoop YARN组件

1. 请解释Yarn的基本架构和工作原理。 YARN&#xff0c;也被称为"Yet Another Resource Negotiator"&#xff0c;是Apache HadoopYARN&#xff0c;也被称为"Yet Another Resource Negotiator"&#xff0c;是Apache Hadoop的一部分&#xff0c;它被设计为一…...

Java架构师技术架构路线

目录 1 概论2 如何规划短中长期的技术架构路线图3 如何规划面向未来的架构4 如何修订路线图执行过程中的偏差5 如何落地路线图-阿里系糙快猛之下的敏捷模式想学习架构师构建流程请跳转:Java架构师系统架构设计 1 概论 首先,规划一个短中长期的技术路线图是非常重要的。短中…...

guacamole docker一键部署脚本

前言 在我学习guacamole的过程中发现全网大致有两种方式安装guacamole的方式&#xff1a; 1. 直接安装&#xff08;下载java环境/mysql/, 修改配置&#xff09; 2. docker安装&#xff08;和直接安装类似&#xff0c;需要下载相关环境&#xff0c;然后做配置&#xff09; 然…...

蓝桥杯算法心得——想吃冰淇淋和蛋糕(dp)

大家好&#xff0c;我是晴天学长&#xff0c;dp题&#xff0c;怎么设计状态很重要&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .想吃冰淇淋和蛋糕 想吃冰淇淋与蛋糕 输入格式 第一行输入一个整数n。…...

LLM之RAG实战(二):使用LlamaIndex + Metaphor实现知识工作自动化

最先进的大型语言模型&#xff08;LLM&#xff09;&#xff0c;如ChatGPT、GPT-4、Claude 2&#xff0c;具有令人难以置信的推理能力&#xff0c;可以解锁各种用例——从洞察力提取到问答&#xff0c;再到通用工作流自动化。然而&#xff0c;他们检索上下文相关信息的能力有限。…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...