小程序圆形进度条及面积图实现的方法

2023-10-17 13:58:08

前言

以下两个图可以用来展示完成进度或者进度详情，图1用的是css来绘制进度条，图2用canvas来绘制面积图。

效果预览

圆形进度条

传进去的有三个参数

字段	意思
currentVal	当前值
maxVal	最大值
status	1 上涨｜ 2 下跌

<circle
    :maxVal="maxVal"
    :currentVal="currentVal"
    :status="2"
/>

重点就是左右各画一半然后利用transform: rotate()旋转隐藏起来，接着利用传进来的当前值计算进度并进行旋转展示。

左右各一半如下图：

setCircle() {
    const { currentVal, maxVal } = this;
    // NO1
    if (currentVal > maxVal / 2) {
        this.leftRotate = this.formatDegree(maxVal / 2);
        this.rightRotate = this.formatDegree(currentVal - maxVal / 2);
    } else {
        // NO2
        this.leftRotate = this.formatDegree(currentVal);
    }
    this.pointRotate = this.formatDegree(currentVal);
},
// NO3 计算旋转
formatDegree(percent) {
    return -136 + (360 / this.maxVal * percent);
}

说明：

NO1: 如果当前值大于最大值的50%则证明左右两边都需要计算展示进度
NO2: 走到这里则证明当前值小于最大值的一半只需要展示左边进度
NO3: 一个圈360度 / 最大值 * 多少份

关于圆点跟随我这里的做法是设置一个一模一样大小的盒子定位上去，并设置成圆形这样就会和进度条重合，然后根据当前值旋转就能准确跟随在进度条的末端。

面积图

字段	意思
currentVal	当前值
maxVal	最大值
sourceData	数值分布情况

<combat
    :maxVal="maxVal"
    :currentVal="currentVal"
    :sourceData="sourceData"
/>

我这里的做法是先做个四边形然后进行旋转变成一个棱形在根据传入的数据进行绘制。

// 设置图表信息
async setUppixelRatio() {
    const pixelRatio = await this.getSystemInfo();
    const { canvas: res, ctx } = this;
    let canvas = res.node;
    // 放大canvas 解决模糊问题
    canvas.width = res.width * pixelRatio;
    canvas.height = res.height * pixelRatio;
    this.originX = canvas.width / 2;
    this.originY = canvas.height / 2;
    this.startAngle = Math.PI + Math.PI / this.sourceData.length;
    // 最大值分为若干等分
    this.combatMaxVal = this.maxVal / this.sourceData.length;
    this.fitAngle();
    // 缩小canvas
    ctx.scale(pixelRatio, pixelRatio);
},

在手机上中canvas会变模糊，在这里我们先将canvas放大然后缩小就可以解决模糊的问题了。其他的都是一些画线操作。

最后

源码在这demo以上的两个demo是用uni-app开发的，如果需要运启动得用HBuilder运行。

到此这篇关于小程序圆形进度条及面积图实现的文章就介绍到这了,更多相关小程序圆形进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

微信小程序之圆形进度条实现思路

需求概要小程序中使用圆形倒计时,效果图: 思路使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval让彩色圆环逐步绘制. 解决方案第一步先写结构一个盒子包裹2个canvas以及文字盒子: 盒子使用相对定位作为父级,flex布局,设置居中: 一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg" 另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"
微信小程序画布圆形进度条显示效果

本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下效果图: 代码: wxml  <canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas> js // pages/test/test.js var context = new wx.createCanv
微信小程序实现圆形进度条动画

本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下上图: 代码: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanvasContext('canvasArcCir'); Page({ data: { }, drawCircle: function () { clearInterval(varName); function drawArc(s, e) { ctx
微信小程序实现实时圆形进度条的方法示例

前言最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧. 效果图如下初始状态点击中间按钮开始绘制绘制过程绘制结束实现思路建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条. WXML代码 <view class="wrap"> <view class="circle-box"> <canvas class
小程序自定义圆形进度条

本文实例为大家分享了小程序自定义圆形进度条的具体代码,供大家参考,具体内容如下 circle.wxss: page { width: 100%; height: 100%; background-color: #fff; } .circle-box { text-align: center; margin-top: 10vw; } .circle { position: absolute; left: 0; right: 0; margin: auto; } .draw_btn { width:
详解微信小程序——自定义圆形进度条

微信小程序自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con
小程序圆形进度条及面积图实现的方法

目录前言效果预览圆形进度条说明: 面积图最后前言以下两个图可以用来展示完成进度或者进度详情,图1用的是css来绘制进度条,图2用canvas来绘制面积图. 效果预览圆形进度条传进去的有三个参数字段意思 currentVal 当前值 maxVal 最大值 status 1 上涨 | 2 下跌 <circle :maxVal="maxVal" :currentVal="currentVal" :status="2" /&g
微信小程序用canvas实现圆形进度条

本文实例为大家分享了微信小程序用canvas实现圆形进度条的具体代码,供大家参考,具体内容如下先放效果图,如下: 1. wxml文件代码如下对于圆形进度条中间的文字,如果是简单的,可以用它自带的属性去填充. 比较复杂的,就可以像下面,通过样式将文字定位到圆形进度条中间合适位置. <view class='circlePage'> <view class='wrap'>  <view class="c
Qt实现小功能之圆形进度条的方法详解

目录功能图形绘制 1.绘制窗口整体背景色值 2.圆形进度条通道绘制 3.圆形进度条绘制 4.文本绘制数值计算 1.计算步长 2.实时数据计算在Qt自带的控件中,只有垂直进度条.水平进度条两种. 在平时做页面开发时,有些时候会用到圆形进度条,比如说:下载某个文件的下载进度. 展示效果,如下图所示: 实现这个功能主要由以下几个重点: 1:图形绘制 2:数值计算也算是一个初级例子,下面我来讲解下如何实现这个简单的小功能吧! 功能自定义绘制类:QRoundedProgress 继承自QWid
Android三种方式实现ProgressBar自定义圆形进度条

进度条样式在项目中经常可以见到,下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条. Android进度条有4种风格可以使用. 默认值是progressBarStyle. 设置成progressBarStyleSmall后,图标变小. 设置成progressBarStyleLarge后,图标变大设置成progressBarStyleHorizontal后,变成横向长方形. 自定义圆形进度条ProgressBar的一般有三种方式: 一.通过动画实现定义res/a

小程序圆形进度条及面积图实现的方法

目录

前言

效果预览

圆形进度条

说明：

面积图

最后

相关推荐

随机推荐