微信小程序制作圆形进度条

微信小程序制作圆形进度条

image

1. 建立文件夹

选择一个目录建立一个文件夹,比如 mycircle 吧,另外把对应 page 的相关文件都建立出来,包括 js,json,wxml 和 wxcc。

image

2. 开启元件属性

在 mycircle.json中开启 component 属性,确定我们这个页面是一个可被调用的元件。

{"component": true,"usingComponents": {}
}

3. 建立 XML 样式

在 mycircle.wxml文件中设计空间的样式及接口参数,也要注意一下 wxss 文件的样式配合。

wxml 文件内容为:

<view class="circle_box" style="width:{{size}}px;height:{{size}}px"><canvas class="circle_bg" canvas-id="{{draw}}bg" style="width:{{size}}px;height:{{size}}px"></canvas> <canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px"></canvas> <text class='circle_txt'> {{txt}}%  </text>  
</view>

4. 在 js 文件中实现代码

js 文件中先要定义出空间的属性,设定默认值以及对应的方法,以便于在参数被修改后直接更新画图。

Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},properties: { //定义属性,对外可以被调用和设置的属性draw: {//画板元素名称idtype: String,value: 'draw',observer:function(newVal,oldVal,change){console.log(newVal, oldVal, change);this.onreset(); //数值变化是所有重绘}},per:{ //百分比 通过此值转换成steptype: String,value: '0',observer:function(newVal,oldVal,change){console.log(newVal, oldVal, change);this.onreset();//数值变化是所有重绘}},r:{//半径type: String,value: '50',observer:function(newVal,oldVal,change){console.log(newVal, oldVal, change);this.onreset();//数值变化是所有重绘}}},

其中,observer 函数会在组件的属性发生变化时被调用,调用后会打印一些调试信息,最终调用的是 onreset 函数。

接下来看看 onreset 函数的内容:(这个在生命周期函数中也需要调用来刷新界面)

onreset: function () {const _this = this;//获取屏幕宽度wx.getSystemInfo({success: function (res) {_this.setData({screenWidth: res.windowWidth});},});//初始化const el = _this.data.draw; //画板元素const per = _this.data.per; //圆形进度const r = Number(_this.data.r); //圆形半径_this.setData({step: (2 * Number(_this.data.per)) / 100, //这里将 0-100 转换为 0-2txt: _this.data.per});//获取屏幕宽度(并把真正的半径px转成rpx)let rpx = (_this.data.screenWidth / 750) * r; //真正的半径//计算出画板大小this.setData({size: rpx * 2  //实际窗口的大小});const w = 10;//圆形的宽度//组件入口,调用下面即可绘制 背景圆环和彩色圆环。_this.drawCircleBg(el + 'bg', rpx, w);//绘制 背景圆环_this.drawCircle(el, rpx, w, _this.data.step);//绘制 彩色圆环}

onreset 函数主要功能是根据组件属性的新值来重新绘制 canvas,首先获取屏幕宽度,以便于计算相对的组件大小,从而适应更多种类的屏幕。

最后将参数进行转换,比如百分比转换成 0-2 之间的浮点数等。

最终设定圆形的宽度后调用 drawCircle 和 drawCircleBg 两个函数来分别绘制前景图和背景图。

背景图的绘制只是绘制一个灰色的圆环,代码相对简单,这里使用了最新的 canvas API 接口:

drawCircleBg: function (el, r, w) {const query = wx.createSelectorQuery().in(this);//wx.createSelectorQuery()query.select('#' + el) // 在 WXML 中填入的 id.fields({ node: true, size: true }).exec((res) => {const canvas = res[0].node;const ctx = canvas.getContext('2d');// Canvas 画布的实际绘制宽高const width = res[0].widthconst height = res[0].height// 初始化画布大小const dpr = wx.getWindowInfo().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)//绘制前清空画布,原点 + 长和宽,这里画圆,因此清零 2r 的方块ctx.clearRect(0, 0, 2 * r, 2 * r);ctx.lineWidth = w;                  // 设置圆环的宽度ctx.strokeStyle = '#E5E5E5';        // 设置圆环的颜色ctx.lineCap = 'round';            // 设置圆环端点的形状ctx.beginPath();                     //开始一个新的路径// r,r为原点,r-w 为半径,从 0 弧度到 2pi 弧度,顺时针(false)画弧度。ctx.arc(r, r, r - w, 0, 2 * Math.PI, false); //设定路径ctx.stroke();//对当前路径进行描边,真正的画}); // */},

这里一下几点注意:

  1. 查找组件要是用‘#’开头 ,这是新的属性定义的。
  2. query = wx.createSelectorQuery().in(this); 这里要是用 in(this)确保在 ready 期间可以找到组件。
  3. 一定要初始化画布大小,否则按照默认大小画出来的会变形。
  4. canvas 的一些方法变成了属性,比如原来的 SetLineWidth 变成了 lineWidth,注意大小写。

最后我们看一下前景图的绘制

drawCircle: function (el, r, w, step) {const query = wx.createSelectorQuery().in(this);//wx.createSelectorQuery()query.select('#' + el) // 在 WXML 中填入的 id.fields({ node: true, size: true }).exec((res) => {const canvas = res[0].node;const context = canvas.getContext('2d');// Canvas 画布的实际绘制宽高const width = res[0].widthconst height = res[0].height// 初始化画布大小const dpr = wx.getWindowInfo().pixelRatiocanvas.width = width * dprcanvas.height = height * dprcontext.scale(dpr, dpr)context.clearRect(0, 0, 2 * r, 2 * r);// 设置渐变var gradient = context.createLinearGradient(2 * r,2 * r, 0,0);gradient.addColorStop("0", "#2661DD");gradient.addColorStop("0.5", "#40ED94");gradient.addColorStop("1.0", "#5956CC");context.lineWidth = w;         // 设置现线的宽度context.strokeStyle = gradient; //设置颜色为渐变context.lineCap = 'round';         //设置端点形状context.beginPath();//开始一个新的路径// step 从0到2为一周,注意 canvas 的坐标方向,从-90°划到正的 270°context.arc(r, r, r - w, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);//context.stroke();           //对当前路径进行描边step ? context.stroke() : ''; //当step为空的时候不画(0%)})//  */},

前景图的绘制区别于背景图,它使用了渐变颜色,同时我们会根据参数中的 step 来进行特定角度的弧线的绘制。

image

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/814682.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vscode远程连接遇到的一些问题

问题&#xff1a; 由于之前报错图片没有保存&#xff0c;所以只有文字描述一下&#xff1a; 1、无法与192.168.8.210建立连接&#xff1a;Vscode服务器启动失败 2、无法与192.168.8.210建立连接&#xff1a;无法安装Vscode服务器 解决方法&#xff1a; 方法一&#xff1a…

Vue输入框/选择框新增状态可编辑,修改状态不可编辑

新增和编辑同页面&#xff0c;新增没有传参&#xff0c;修改状态不可编辑。 在这里我用选择框举例。 思路&#xff1a; 在新增/修改页&#xff0c;先判断是哪种状态&#xff0c;再根据状态不同&#xff0c;选择是否禁用某个选择框。 判断是否有传参&#xff0c;有传参即为修…

baichuan 2模型使用的注意事项

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

51蓝桥杯之DS18B20

DS18B20 基础知识 代码流程实现 将官方提供例程文件添加到工程中 添加onewire.c文件到keil4里面 一些代码补充知识 代码 #include "reg52.h" #include "onewire.h" #include "absacc.h" unsigned char num[10]{0xc0,0xf9,0xa4,0xb0,0x99,…

Unity WebGL Release-Notes

&#x1f308;WebGL Release-Notes 收集的最近几年 Unity各个版本中 WebGL的更新内容 &#x1f4a1;WebGL Release-Notes 2023 &#x1f4a1;WebGL Release-Notes 2022 &#x1f4a1;WebGL Release-Notes 2021

随机链表的复制 - LeetCode 热题 32

大家好&#xff01;我是曾续缘&#x1f4a4; 今天是《LeetCode 热题 100》系列 发车第 32 天 链表第 11 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 随机链表的复制 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff…

TPS70401系列双输出、低压差线性稳压器(LDO)的数据手册

这份文件是关于德州仪器(Texas Instruments)公司生产的TPS70401系列双输出、低压差线性稳压器(LDO)的数据手册。这些稳压器专为分压供电系统设计,具有集成的系统电压监控器(SVS)功能,适用于需要高电流输出和低静态电流的应用。 以下是这些低压差线性稳压器的核心特点和…

(四)PostgreSQL的psql命令

PostgreSQL的psql命令 基础信息 OS版本&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本&#xff1a;16.2 pg软件目录&#xff1a;/home/pg16/soft pg数据目录&#xff1a;/home/pg16/data 端口&#xff1a;5777psql 是 PostgreSQL 数据库的命令行界面…

NASA数据集——ACCLIP WB-57 Aircraft 飞机合并数据

ACCLIP WB-57 Aircraft Merge Data ACCLIP WB-57 飞机合并数据 简介 ACCLIP_Merge_WB57-Aircraft_Data 是在亚洲夏季季风化学和气候影响项目&#xff08;ACCLIP&#xff09;期间从 WB-57 飞机上收集的各种现场仪器测量数据预先生成的合并文件。该产品的数据收集工作已经完成。…

【leetcode面试经典150题】28.盛最多水的容器(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…

Python Ecosystem之Pandas使用记录

高亮颜色说明&#xff1a;突出重点 个人觉得&#xff0c;&#xff1a;待核准个人观点是否有误 高亮颜色超链接 文章目录 读写excel文件操作问题SettingWithCopyWarning: A value is trying to be set on a copy of a slice from a DataFrame. 二级标题待补充待补充 读写excel文…

设计模式之结构型模式---代理模式

代理模式是一种结构型设计模式&#xff0c;它为目标对象提供一种代理&#xff0c;以控制对这个对象的访问。代理对象在客户端和目标对象之间起到中介的作用&#xff0c;客户端通过代理类与目标对象进行交互&#xff0c;而不是直接与目标对象进行交互。 代理模式的应用场景非常…

漫步密度森林:借助HDBSCAN实现高效数据聚类

文章来源&#xff1a;navigating-the-density-forest-harnessing-hdbscan-for-advanced-data-clustering 2024 年 4 月 9 日 介绍 在数据科学中&#xff0c;聚类算法是揭示数据集内在结构的重要工具。在这些工具中&#xff0c;基于分层密度的噪声应用空间聚类 (HDBSCAN) 作为…

一篇文章深入学习Java的AQS(AbstractQueuedSynchronizer)

深入理解AQS的设计和工作机制 Oracle官方文档中的AbstractQueuedSynchronizer部分讲解 AbstractQueuedSynchronizer&#xff08;简称AQS&#xff09;是Java并发包中的一个基础框架&#xff0c;它为实现依赖单个原子变量来表示状态的同步器提供了可靠的基础。这个框架被广泛用…

【leetcode面试经典150题】48. 汇总区间(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…

【C++学习】C++11新特性(第一节)

文章目录 ♫一.文章前言♫二.C11新特性♫一.统一的列表初始化♫二.std::initializer_list♫三.声明♫四.decltype关键字♫五.nullptr♫六.新增加容器---静态数组array、forward_list以及unordered系列♫6.1unordered_map与unoredered_set♫6.2array♫6.3 forward_list&#xff…

【Altium Designer 20 笔记】隐藏PCB上的信号线(连接线)

使用网络类隐藏特定类型的信号线 如果你想要隐藏特定类型的信号线&#xff08;例如电源类&#xff09;&#xff0c;你可以首先创建一个网络类。使用快捷键DC调出对象类浏览器&#xff0c;在Net Classes中右击添加类&#xff0c;并重命名&#xff08;例如为“Power”&#xff0…

使用CDN服务对网页加载速度有何影响,如何选择合适的CDN提供商

使用CDN服务对网页加载速度有显著的正面影响。CDN&#xff08;内容分发网络&#xff09;通过将内容缓存到全球各地的服务器节点上&#xff0c;使得用户可以从地理位置上最接近的节点获取数据&#xff0c;从而减少了数据传输的时间和延迟&#xff0c;加快了网页的加载速度。此外…

八大排序算法(面试被问到)

1.八大排序算法都是什么&#xff1f; 八大排序算法有&#xff1a;插入排序、冒泡排序、归并排序、选择排序、快速排序、希尔排序、堆排序、基数排序&#xff08;通常不提&#xff09;。此外&#xff0c;还可以直接调用Arrays.sort()进行排序。 2.八大排序算法时间复杂度和稳定…

centos编译安装nginx1.24

nginx编译1.24&#xff0c;先下载安装包 机器通外网的话配置nginx的yum源直接yum安装 vim /etc/yum.repos.d/nginx.repo [nginx-stable] namenginx stable repo baseurlhttp://nginx.org/packages/centos/$releasever/$basearch/ gpgcheck1 enabled1 gpgkeyhttps://nginx.org…