小程序canvas画环形百分比进度图
组件封装
component/canvas-ring目录下
canvas-ring.js
<canvas style="width:{{canvasWidth}}px;height:{{canvasWidth}}px; margin:0 auto;position:relative" type="2d" id="myCanvas"><view class="circle-bar" style="height:{{canvasWidth}}px;"><view class="title_val" style="color: {{valueColor}}; font-weight:{{f_weight}}; margin-top:{{show_tip?'10':'0'}}rpx;font-size:{{f_size}}px">{{value}}<p style="font-size: 10px;display: inline;">{{suffix}}</p></view><view class="title_name" style="color: {{lineColor}};">{{title}}</view></view>
</canvas>
canvas-ring.json
{"component": true,"usingComponents": {} }
canvas-ring.wxss
.circle-bar{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;position: absolute;top: 0;
}
.circle-bar .title_name{max-height: 62rpx;font-size: 26rpx;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.circle-bar .title_val{color: #333333;
}
canvas-ring.js
var windWidth = wx.getSystemInfoSync().windowWidth; //这里获取下设备的屏幕宽度Component({/*** 组件的属性列表*/properties: {//画布的宽度 默认占屏幕宽度的0.4倍canvasWidth: {type: Number,value: windWidth * 0.4},//线条宽度 默认10lineWidth: {type: Number,value: 10},//线条颜色lineColor: {type: String,value: "#3696FA"},//标题 默认“完成率”title: {type: String,value: "完成率"},//当前的值 默认45value: {type: Number,value: 50},//值的颜色 默认””valueColor: {type: String,value: "#333"},//值的字体的大小颜色 默认f_size: {type: Number,value: 14},f_weight: {type: String,value: "500"},//最大值 默认100maxValue: {type: Number,value: 100},//最小值 默认0minValue: {type: Number,value: 0},//当前值的后缀名suffix: {type: null,value: "%"},//从什么角度开始 0~360之间 （12点方向为0,18点方向为180,0点方向为360）startDegree: {type: Number,value: 0}},data: {canvasWidth: windWidth * 0.4, //默认创建的环形图宽度为屏幕宽度的40%show_tip: true},methods: {drawCanvasRing() {//没标题的时候去掉margin-top的值if (this.data.title.replace(/(^\s*)|(\s*$)/g, "").length == 0) {this.setData({show_tip: false})}//canvas 2dconst query = wx.createSelectorQuery().in(this);query.select("#myCanvas").fields({node: true,size: true}).exec(this.init.bind(this))},init(res) {const canvas = res[0].nodeconst ctx = canvas.getContext("2d");canvas.requestAnimationFrame(() => {})const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].width * dprcanvas.height = res[0].height * dprctx.scale(dpr, dpr);// 大小值的计算var circle_r = this.data.canvasWidth / 2; //画布的一半，用来找中心点和半径var startDegree = this.data.startDegree; //从什么角度开始var maxValue = this.data.maxValue; //最大值var minValue = this.data.minValue; //最小值var value = this.data.value; //当前的值var lineColor = this.data.lineColor; //线条颜色var lineWidth = this.data.lineWidth; //线条宽度var percent = 360 * ((value - minValue) / (maxValue - minValue)); //计算结果//定义起始点ctx.translate(circle_r, circle_r);//灰色圆弧ctx.beginPath();ctx.strokeStyle = "#ebebeb";ctx.lineWidth = lineWidth;ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true);ctx.stroke();ctx.closePath();//有色彩的圆弧ctx.beginPath();ctx.strokeStyle = lineColor;ctx.lineWidth = lineWidth;ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, percent * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false);ctx.stroke();ctx.closePath();console.log(this.data.value);}}
})
使用
父页面
canvas.js
/*** 页面的初始数据*/data: {completePercent: 10, //圆环A的动态值completePercent2: 60 //圆环B的动态值},
/*** 生命周期函数--监听页面加载*/onLoad: async function (options) {await tools.request('/main/mainTest', {id: 1,}, 'get').then((res) => {if (res.data.code == 1) {this.setData({completePercent: res.data.data.score.before,completePercent2: res.data.data.score.finish,})} else {wx.showToast({title: res.data.msg,icon: 'none',})}})await this.getRingsA();
await this.getRingsB();},
方法
getRingsA() {this.canvasRing = this.selectComponent("#canringA");this.canvasRing.drawCanvasRing() //绘制圆环A},getRingsB() {this.canvasRing2 = this.selectComponent("#canringB");this.canvasRing2.drawCanvasRing() //绘制圆环B},
canvas.wxml
<canvas2d-ring type="2d" id="canringA" canvasWidth="{{120}}" f_weight="bold" value="{{completePercent}}" lineColor="#EA0000" f_size="21" lineWidth="{{10}}" title="{{'施工前'}}"></canvas2d-ring>
canvas.json
{ "navigationStyle":"custom","component": true,"usingComponents": {"canvas2d-ring": "/component/canvas-ring/canvas-ring"}
}
相关文章：
小程序canvas画环形百分比进度图
组件封装 component/canvas-ring目录下 canvas-ring.js <canvas style"width:{{canvasWidth}}px;height:{{canvasWidth}}px; margin:0 auto;position:relative" type"2d" id"myCanvas"><view class"circle-bar" style&quo…...
面试经验分享 | 北京渗透测试岗位
更多大厂面试经验的视频经验分享看主页 目录： 所面试的公司：安全大厂 所在城市：北京 面试职位：渗透测试工程师 面试方式：腾讯会议线上面试线下面试 面试过程： 面试官的问题： 1、说一下XSS有哪…...
安卓 SystemServer 启动流程
目录 引言 Android系统服务启动顺序 zygote fork SystemServer 进程 SystemServer启动流程 1、SystemServer.main() 2、SystemServer.run() 3、初始化系统上下文 4、创建系统服务管理 5、启动系统各种服务 总结 引言 开机启动时 PowerManagerService 调用 AudioSer…...
opencv存图速度测试
以下测试的图片，均为5488x3672分辨率的三通道彩色图。 分别使用opencv和halcon存图，测试速度，存100次取平均值，结果如下： image size:5488 3672 opencv jpg save time 0.12809s opencv bmp save time 0.02197s hal…...
[ffmpeg]编译 libx264
步骤 下载 libx264 git clone https://code.videolan.org/videolan/x264.git cd x264环境搭建 然后在开始菜单中找到并打开 x64 Native Tools Command Prompt for VS 2019 ： 打开 msys2_shell.cmd -use-full-path 这时会打开 MSYS 的新窗口，先把一些汇…...
常见API
1.API 1.1API概述 什么是API API (Application Programming Interface) ：应用程序编程接口 java中的API 指的就是 JDK 中提供的各种功能的 Java类，这些类将底层的实现封装了起来，我们不需要关心这些类是如何实现的，只需要…...
vscode写python，遇到问题：ModuleNotFoundError: No module named ‘pillow‘（已解决 避坑）
1 问题： ModuleNotFoundError: No module named pillow 2 原因： 原因1：安装Pillow的pip命令所处的python版本与vscode调用的python解释器版本不同。 如： 原因2：虽然用的是pillow，但是写代码的时候只能用…...
【mysql】id主键列乱了之后，重新排序（可根据日期顺序）
一、ID中断不连续的，重新设置为连续的ID alter table table_name drop id; alter table table_name add id int not null first; alter table table_name modify column id int not null auto_increment, add primary key(id); select * from table_name order by …...
SO-CNN-LSTM-MATT蛇群算法优化注意力机制深度学习多特征分类预测
SO-CNN-LSTM-MATT蛇群算法优化注意力机制深度学习多特征分类预测（多输入单输出） 目录 SO-CNN-LSTM-MATT蛇群算法优化注意力机制深度学习多特征分类预测（多输入单输出）分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matl…...
原点安全再次入选信通院 2024 大数据“星河”案例
近日，中国信息通信研究院和中国通信标准化协会大数据技术标准推进委员会（CCSA TC601）共同组织开展的 2024 大数据“星河（Galaxy）”案例征集活动结果正式公布。由工银瑞信基金管理有限公司、北京原点数安科技有限公司联…...
Hadoop
HDFS一键启动/停止 start-dfs.sh stop-dfs.sh 单进程启动/停止 $HADOOP_HOME/bin/hdfs，此程序也可以用以单独控制所在机器的进程的启停 hdfs --daemon (start|status|stop) (namenode|secondarynamenode|datanode)#例如启动namenode，去到需要启动的服…...
【Ambari】使用 Knox 进行 LDAP 身份认证
目录 一、knox介绍 二、Ambari配置LDAP认证 三、验证Knox网关 3.1YARNUI 3.2 HDFSUI 3.3 HDFS RestFULL 3.4 SparkHistoryserver 3.5 HBASEUI 一、knox介绍 Apache Knox网关是一个用于与Apache Hadoop部署的REST api和ui交互的应用程序网关。Knox网关为所有与Apache Ha…...
)
计算机网络习题( 第3章 物理层 第4章 数据链路层 )
第3章 物理层 一、单选题 1、下列选项中，不属于物理层接口规范定义范畴的是（ ）。 A、 接口形状 B、 引脚功能 C、 传输媒体 D、 信号电平 正确答案： C 2、在物理层接口特性中，用于描述完成每种功能的事件发…...
Windows系统中mt6.dll文件缺失是什么原因？mt6.dll文件缺失详解与修复指南
mt6.dll文件的作用 mt6.dll是一个动态链接库文件，它通常与特定的软件或游戏相关联，用于支持这些程序中的某些功能。虽然它并非Windows系统的核心文件，但对于依赖于它的程序来说，mt6.dll的缺失可能导致程序无法正常运行或启动。 …...
homebrew，gem，cocoapod 换源，以及安装依赖
安装homebrew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 再按照成功提示配置环境变量 ruby 更新ruby到最新 brew install ruby 如果安装了会自动升级 安装完成后根据提示配置环境变量 再执行命令使其生效 s…...
uni-app开发商品详情页面实现
目录 一：功能描述 二：功能实现 一：功能描述 商品详情页主要展示商品的图片，基础信息，详细描述信息，以及销量，库存信息等。 首先在顶部以轮播图形式展示图片信息，下面展示商品价格和商品名称和描述信息，然后显示商品的关键卖点信息，最后展示商品详情信息。 二：功…...
mvn install:install-file jar 打入本地仓库
安装指定文件到本地仓库命令：mvn http://install:install-file -DgroupId : 设置上传到仓库的包名 -DartifactId : 设置该包所属的模块名 -Dversion1.0.0 : 设置该包的版本号 -Dpackagingjar : 设置该包的类型(很显然jar包) -Dfile : 设置该jar包文件所在的路径…...
亚式期权定价模型Turnbull-Wakeman进行delta对冲
Turnbull-Wakeman Model是一种用于定价和对冲亚式期权的数学模型。该模型由David Turnbull和Keith Wakeman在1990年提出，用于解决亚式期权的定价问题。 亚式期权是一种路径依赖类型的期权，其期权价格与标的资产价格某个期间内的平均值有关，假…...
Qt之CAN设计（十三）
Qt开发 系列文章 - CAN（十三） 目录 前言 一、CAN 二、实现方式 1.创建类 2.相关功能函数 3.用户使用 4.效果演示 5.拓展应用-实时刷新 总结 前言 Qt框架中并没有提供关于CAN接口的相关模块，需要用户自己根据CAN接口硬件模块&#…...
windows10/windows11运行ps1脚本报错的解决方法，签名错误解决方法
使用win10/win11运行ps1脚本时报错，提示“禁止运行此脚本”，错误如图所示： 此问题通常是由于windows默认的策略导致，解决方法是重新设置权限策略。 1. 设置windows配置 1）. 使用管理员权限运行powershell 搜索power…...
在 Mac M2 上安装 PyTorch 并启用 MPS 加速的详细教程与性能对比
1. 安装torch 在官网上可以查看安装教程，Start Locally | PyTorch 作者安装了目前最新的torch版本2.5.1，需要提前安装python3.9及以上版本，作者python版本是python3.11最新版本 使用conda安装torch，在终端进入要安装的环境&…...
vulnhub matrix-breakout靶场
1.搭建靶机 这样就是装好了 获取靶机IP nmap -O 192.168.47.129/24 2.信息收集 dirb http://192.168.47.128 dirb 首页 81端口一个登录页面 gobuster dir -u http://192.168.152.154 -w /usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt -x php,txt,html gra…...
 ` 案例分析)
Hive SQL 窗口函数 `ROW_NUMBER() ` 案例分析
一文彻底搞懂 ROW_NUMBER() 和 PARTITION BY 1. 引言 在处理大规模数据集时，Hive SQL 提供了强大的窗口函数（Window Function），如 ROW_NUMBER()，用于为结果集中的每一行分配唯一的行号。当与 PARTITION BY 和 ORDER …...
windows C++ TCP客户端
demo有一下功能 1、心跳包 2、断开重连 3、非阻塞 4、接受数据单独线程处理 #include <iostream> #include <winsock2.h> #include <ws2tcpip.h> #include <windows.h> #include <string> #include <process.h> // 用于Windows下的线程相…...
【C++】初识C++之C语言加入光荣的进化（上）
写在前面 本篇笔记作为C的开篇笔记，主要是讲解C关键字(C98)连带一点点(C11)的知识。掌握的C新语法新特性，当然C是兼容C的，我们学习C的那套在C中也是受用。 文章目录 写在前面一、命名空间域1.1、命名空间域的定义与使用1.2、命名空间域的细节…...
Linux文件目录 --- 文件时间戳、atime、mtime、ctime、指定格式查看
三、文件时间戳 1. atime 文件最近被访问时间,是在读取文件或者执行文件时更改的,如果只cd进入一个目录然后cd . .不会引起atime的改变，要是使用ll命令进行查看后，再cd . . 离开就不同了。 2. mtime 文件最近内容修改时间，在目录中有文件…...
网页博客风格未完
实现类似的博客风格： 学习前端开发基础： HTML & CSS：掌握网页结构和样式设计的基础知识。JavaScript：增强网页的互动性和动态效果。响应式设计：确保您的博客在不同设备上都有良好的显示效果。 使用开源模板&#x…...
LeetCode 2545.根据第 K 场考试的分数排序：考察编程语言的排序
【LetMeFly】2545.根据第 K 场考试的分数排序：考察编程语言的排序 力扣题目链接：https://leetcode.cn/problems/sort-the-students-by-their-kth-score/ 班里有 m 位学生，共计划组织 n 场考试。给你一个下标从 0 开始、大小为 m x n 的整数…...
软考：系统架构设计师教材笔记（持续更新中）
教材中的知识点都会在。其实就是将教材中的废话删除，语言精练一下，内容比较多，没有标注重点 系统架构概述 定义 系统是指完成某一特定功能或一组功能所需要的组件集，而系统架构则是对所有组件的高层次结构表示，包括各…...
安卓环境配置及打开新项目教程，2024年12月20日最新版
1.去官网下载最新的Android Studio，网址：https://developer.android.com/studio?hlzh-cn 2.下载加速器，注册账号，开启加速器。网址：放在文末。 3.下载安卓代码，项目的路径上不能有中文，特别是…...
基于Spring Boot的电影售票系统
一、系统概述 该系统采用Spring Boot框架开发，充分利用其简化配置、快速部署和生产级别的性能监控等特点，为电影售票业务提供高效、可靠的技术支持。同时，系统采用前后端分离架构，前端使用Vue.js等框架，后端使用Sprin…...
【linux】 unshare -user -r /bin/bash命令详解
命令解析 unshare -user -r /bin/bash 是一个 Linux 命令，它用于在新的用户命名空间中运行一个进程（在这个例子中是 /bin/bash）。以下是这个命令的详细解释： 【1. 命令解析】 unshare: unshare 是一个工具，用于从调用…...
uniappX 移动端单行/多行文字隐藏显示省略号
在手机端不能多行省略使用 -webkit-line-clamp 属性所以移动端多行省略不会生效改为 lines 属性即可 /**单行文本溢出显示省略号*/ .text-ov1 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: auto; } /**APP多行文本溢出显示省略号*/ // #ifdef APP-…...
uniApp打包H5发布到服务器（docker）
使用docker部署uniApp打包后的H5项目记录，好像和VUE项目打包没什么区别... 用HX打开项目，首先调整manifest.json文件 开始用HX打包 填服务器域名和端口号~ 打包完成后可以看到控制台信息 我们可以在web文件夹下拿到下面打包好的静态文件 用FinalShell或…...
谷歌Gemini与Anthropic Claude对比测试引发争议：AI竞赛暗流涌动
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...
RAF认证的具体内容是什么？
RAF认证 Responsible Animal Fiber RAF认证，负责任动物纤维标准，是一个致力于确保动物福利、环境可持续性以及产品质量合规性的透明、可追溯和可信赖的认证体系。该体系不仅涵盖了动物纤维的生产和加工环节，还注重从源头到最终产品的整个供应…...
《OpenCV计算机视觉》-对图片的各种操作（均值、方框、高斯、中值滤波处理）及形态学处理
文章目录 《OpenCV计算机视觉》-对图片的各种操作（均值、方框、高斯、中值滤波处理）边界填充阈值处理图像平滑处理生成椒盐图片均值滤波处理方框滤波处理高斯滤波处理中值滤波处理 图像形态学腐蚀膨胀开运算闭运算顶帽和黑帽 《OpenCV计算机视觉》-对图片…...
Java字符串的|分隔符转List实现方案
字符串处理 问题背景代码实现代码优化原因分析实现方案 注意事项异常处理Maven未识别异常 问题背景 在项目组对账流程中，接收对方系统的对账文件，数据以|为分隔符，读取文件内容，分条入库。 代码实现 Java中将字符串转给list&am…...
【机器学习】当教育遇上机器学习：打破传统，开启因材施教新时代
我的个人主页 我的领域：人工智能篇，希望能帮助到大家！！！👍点赞 收藏❤ 教育是人类社会发展的基石，然而传统教育模式往往难以满足每个学生的个性化需求。随着机器学习技术的兴起，教…...
【FastAPI】日志
一、概述 FastAPI 是一个现代的、快速（高性能）的Web框架，用于构建API，基于Python类型提示。 日志记录是任何应用程序中不可或缺的一部分，它允许开发者追踪事件的发生、识别错误并了解系统的运行状态。 在 FastAPI 中&…...
faiss库中ivf-sq（ScalarQuantizer，标量量化）代码解读-7
流程 代码 void IndexIVF::search(idx_t n,const float* x,idx_t k,float* distances,idx_t* labels,const SearchParameters* params_in) const {FAISS_THROW_IF_NOT(k > 0);const IVFSearchParameters* params nullptr;if (params_in) {params dynamic_cast<const I…...
ORA-65198 PDB clone 时 不能新加datafile 以及hang的一个原因
create pluggable database XX from SS keystore identified by "YYY" parallel 32 service_name_convert( _srv, _srv); 20TB 4小时 update /* rule */ undo$ set name:2,file#:3,block#:4,status$:5,user#:6,undosqn:7,xactsqn:8,scnbas:9,scnwrp:10,inst#:11,…...
大秦朝历史
大秦朝是中国历史上一个虚构的朝代，通常被认为是秦朝的后继者。根据一些历史小说和影视作品的描述，大秦朝被描绘为一个强大的中央集权国家，统一了整个中国。大秦朝的帝王被描述为英明神武，开创了繁荣富强的盛世。 根据这些虚构的…...
docker部署工业操作系统基础环境手册
在 Docker 上安装最新的 TDengine 数据库并将数据文件和配置文件映射到宿主机，可以按照以下步骤操作： 一、Tdengine 篇章 1. 拉取最新的 TDengine 镜像 首先，确保你的 Docker 环境已安装并运行。然后，使用以下命令拉取 TDengine…...
算法 class 003
二进制表示数 8位 有符号二进制位，能表示正数128位 ，0 ~ 127(2的7次方减1) ，能表示负数128位 ，-1 ~ -128。 n 位有符号二进制位，一共能表示 2的n次放个数，正数为0 ~ (2的n-1次方) - 1（再减1&…...
gcc和gcc -c区别
gcc 和 gcc -c 之间的主要区别在于编译过程的不同阶段以及最终生成的输出文件类型。理解这两者的区别对于有效地管理和构建项目非常重要。 ### gcc（默认行为） 当你使用 gcc 编译器而没有指定 -c 选项时，GCC 会执行整个编译链的所有步骤&…...
从一次线上故障聊聊接口自动化测试
1、背景 3月初，运营同事配置了个还未上线的页面到网站首页 banner，导致用户点了报错。尽管这次很明确是运营人为操作失误引起的故障，但过往此类核心页面的访问异常，我们已不是第一次遇见。 从平台整体利益触发，我们各…...
工业大数据分析算法实战-day15
文章目录 day15特定数据类型的算法工业分析中的数据预处理工况划分数据缺失时间数据不连续强噪声大惯性系统趋势项消除 day15 今天是第15天，昨日是针对最优化算法、规则推理算法、系统辨识算法进行了阐述，今日主要是针对其他算法中的特定数据类型的算法…...
QLocalServer本地进程通信发送数据丢失部分数据丢失解决方案
问题说明 Qt使用QLocalServer进行本地进程通信，发现数据随机丢失。例如，我需要连续发送7个数据，如果连续调用socket的write接口，会引起数据随机丢失，导致数据不完整。 解决方案 我这里的解决方案是，将7个…...
0.gitlab ubuntu20.04 部署问题解决
安装依赖： ① sudo apt-get update 出现： 解决方式： 去 /etc/apt/sources.list.d 这个目录删除或注释对应的list文件 第三方软件的源一般都以list文件的方式放在 /etc/apt/sources.list.d 这个目录 重新运行sudo apt-get update 安装…...