画圆形进度条图

最新推荐文章于 2022-11-23 16:08:24 发布
最新推荐文章于 2022-11-23 16:08:24 发布
阅读量628 收藏
点赞数
分类专栏： css画圆弧进度条 canvas画圆弧进度条 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25452801/article/details/108336799
版权

1.用css实现。

前言：只适用于两种颜色，多种颜色使用canvas

原理：将块元素分为左右两半，在里面画一个圆分别显示左右进度，圆中border对应设置两个颜色，通过rorate(45deg)，来让上下左右边框变成四个圆弧，再通过rorate来显示左右各占多少。

实现效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.area {
				width: 300px;
				height: 300px;
			}
			.circle-pic {
				width: 60px;
				height: 60px;
				position: relative;
				overflow: hidden;
			}

			.circle-l {
				position: absolute;
				width: 50%;
				height: 100%;
				overflow: hidden;
				right: 0;
			}

			.circle-r {
				position: absolute;
				width: 50%;
				height: 100%;
				overflow: hidden;
				left: 0;
			}

			.circle-l .txt {
				/* width:50%; */
				position: absolute;
				top: 0;
				right: 0;
				width: 200%;
				height: 100%;
				border: 5px solid red;
				border-radius: 50%;
				transform: rotate(45deg);
				transition: all .3s ease;
				box-sizing: border-box;
				border-left-color: blue;
				border-bottom-color: blue;
				transform: rotate(106deg);
			}

			.circle-r .txt {
				position: absolute;
				top: 0;
				width: 200%;
				height: 100%;
				border: 5px solid blue;
				border-radius: 50%;
				transform: rotate(45deg);
				transition: all .3s ease;
				box-sizing: border-box;
				border-right-color: red;
				border-top-color: red;
				transform: rotate(106deg);
			}
		</style>
	</head>
	<body>
		<div class="area">
			<div class="circle-pic">
				<div class="circle-l">
					<span class="txt"></span>
				</div>
				<div class="circle-r">
					<span class="txt"></span>
				</div>
			</div>
		</div>
	</body>
</html>

2.用canvas实现

原理：直接通过百分比画圆弧的方式实现

实现效果：与上图类似

代码：以下为项目uniapp中的组件

<template>
	<view class="c-circle">
		<canvas  style="width:60px;height:60px;" :canvas-id="'homeownerCanvas'+index" class="c-can homeowner-canvas_charts"></canvas>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				dataList : [{
				    "value": 0.3,
				    "color": "#2445A1"
				},
				{
				    "value": 0.2,
				    "color": "#EA4747"
				}
				]
			}
		},
		created(){
			
		},
		props:{
			hNum: [String,Number],
			aNum: [String,Number],
			index: [String,Number]
		},
		watch:{
		},
		mounted(){
			this.drawCanvas();
			// hNum,aNum是数据的数值，index用来区分多个canvas
			let p1=(parseInt(this.aNum/(this.aNum+this.hNum)*100)/100).toFixed(2);
			let p2 = 1-p1;
			this.$set(this.dataList[0],'value',p1);
			this.$set(this.dataList[1],'value',p2);
			this.canvasGraph('homeownerCanvas'+this.index,this.dataList,100)
		},
		methods:{
			canvasGraph(canvasID,data,summation){
			    function PieChart(ctx,radius){
			         //定义起始角度
			        let tempAngle=270;
			        //定圆心位置
			        let x0=30,y0=30;
					let outLine = 10;
			        PieChart.prototype.init = function(data){
			            this.drawPie(data);
			        };    
			        // 绘画扇形 及中心圆
			        PieChart.prototype.drawPie = function(data){
			            for (let i = 0; i < data.length; i++) {
			                // 开始一个新路径
			                ctx.beginPath();
			                // 移动到中心点
			                ctx.moveTo(x0,y0);
			                //计算当前扇形角度   所占比例*360
			                let angle = data[i].value*360;
			                //当前扇形起始绘制弧度   360 = 2π  等于6.28
			                let startAngle = tempAngle*Math.PI/180;
			                //当前扇形借结束绘制弧度
			                let endAngle = (tempAngle + angle)*Math.PI/180;
			                //绘制扇形  x y中心  半径  开始弧度  结束弧度
			                ctx.arc(x0,y0,radius,startAngle,endAngle);
			                //填充扇形
			                ctx.fillStyle = data[i].color;
			                // 填充
			                ctx.fill();
			                // 调用添加标题解释方法
			                // this.drawTitle(startAngle,angle,data[i].color, data[i].title + data[i].money)
			                //当前扇形结束绘制角度，即下一个扇形开始绘制角度
			                tempAngle += angle;
			            }
			            // 开始一个新路径
			            ctx.beginPath();
			            // 开始画圆
			            ctx.arc(x0, y0, 19, 0, 2 * Math.PI)
			            // 填充颜色 白色
			            ctx.setFillStyle('white')
			            // 调用绘制中心圆文字方法
			            this.drawCenterTitle()
			        }
			        // 伸出线条方法
			        PieChart.prototype.drawTitle = function(startAngle,angle,color,title){
			            // 伸出去的长度 斜边长度 等于半径加上定义好的长度  
			            let out = radius;
			            // 当前弧度的二分之一
			            let du = startAngle+(angle/2)*Math.PI/180;
			            // 计算伸出的点x坐标
			            let outX = x0+out*Math.cos(du);
			            // 计算伸出的点y坐标
			            let outY = y0+out*Math.sin(du);
			            // 开始一个新路径
			            ctx.beginPath();
			            // 移动到中心点
			            ctx.moveTo(x0,y0);
			            // 画出点到伸出点的一条线
			            ctx.lineTo(outX,outY);
			            // 线条颜色
			            ctx.strokeStyle = color;
			            //设置标题
			            ctx.font = 'bold 14px Microsoft Yahei';
			            // 计算出标题文字宽度
			            let textWidth = ctx.measureText(title).width;
			            // 计算标题样式
			            ctx.textBaseline = "bottom";
			            // 刷新配置项  象限判断 与 对应符号
			            let optionArr=[
			                {
			                    quadrant:outX>x0 && outY<y0,
			                    symbol:['+','-','left']
			                },
			                {
			                    quadrant:outX<x0 && outY<y0,
			                    symbol:['-','-','right']
			                },
			                {
			                    quadrant:outX<x0 && outY>y0,
			                    symbol:['-','+','right']
			                },
			                {
			                    quadrant:outX>x0 && outY>y0,
			                    symbol:['+','+','left']
			                }
			            ]
			            // 渲染的配置项
			            let {symbol} = optionArr.find(el=>el.quadrant&&el.symbol)
			            // 斜线起始点
			            let slashState = eval(outX+symbol[0]+outLine)
			            // 横线起始点
			            let lineState = eval(outX+symbol[0]+textWidth+symbol[0]+outLine)
			            // 终点
			            let lineEnd = eval(outY+symbol[1]+outLine)
			            // 标题文字样式
			            ctx.textAlign = symbol[2];
			            // 画出伸出的斜线
			            ctx.lineTo(slashState,lineEnd);
			            // 接上斜线画出标题下面的直线
			            ctx.lineTo(lineState,lineEnd);
			            // 填充标题
			            ctx.fillText(title,slashState,lineEnd);
			            // 填充
			            ctx.stroke();
			        }
			        // 绘制中心文字
			        PieChart.prototype.drawCenterTitle = function(){
			            // 填充
			            ctx.fill();
			            // 开始画图
			            ctx.draw()
			        }
			    
				}
			    var ctx = uni.createCanvasContext(canvasID) 
			    var PieChart = new PieChart(ctx,25)
			    PieChart.init(data)
			},
			drawCanvas(){
				let context = uni.createCanvasContext('myCanvas'+this.index,this);
				context.lineWidth = 10;   
				context.beginPath();
				context.arc(100, 100, 50, 0, Math.PI/2 , true);
				context.strokeStyle = '#0f0';
				context.stroke();
				context.beginPath();
			}
		}
	}
</script>

<style lang="scss" scope>
	.c-circle{
		.c-can{
			width:300upx;
			height:300upx;
			margin: 0 auto;
		}
	}
</style>

 

喃喃子鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 圆形进度图_CSS实现简单的圆形进度条
weixin_26985923的博客
12-06 1601
效果图在渲染页面的过程中，进度条是我们最为常见的，有条形进度条，圆环进度条，圆形进度条。今天，我们就来实现一下圆形进度条。用到的知识点：1、transform：rotate；(旋转)2、animation；(动画关键帧)首先，我们创建一个box，作为父级容器，定宽定高(160px)，定位(position：relative);.box{ width: 160px; height: 160px; m...
如何实现一个环形进度条
啊sir的专栏
03-09 2258
在之前的工作中，有一个需求是判断已用和剩余油量用环形进度条的方式展示的。改方面的数据是通过串口从底层获取过来的，这边我就随便拿个数来填充就好了。当时由于上级的要求就自己写了一个比较简单的出来。好的，那么今天将跟大家分享如何自定义一个环形进度条，也算是对这方面的知识进行一个总结。下面我们开始实现这个功能。那么首先还是先上代码：package com.example.circularprogressba
uni-app中自定义图表（canvas实现chart图表）开发篇（3）-带针表刻度的圆环进度条
觉醒法师的专栏
05-20 1673
还是在之前几篇基础上，讲下圆环衍生出一种新的圆环进度条，以针表的刻度来绘制出一个进度条。图形如下： 一、创建相应文件 1.1 charts.js文件创建 /** * 图表 - 带时刻的圆环进度条 */ export class CircleBox { //构造函数 constructor(_context){ } //绘制图表 drawCircle(){ } } 1.2 vue页面创建 <template> <view class
uniapp圆形进度条
zhao001101的博客
11-23 1989
进度条
圆形进度条-图片方式
02-27 1024
此方式有别于之前的一篇纯绘制，这个基于图片，通过路径剪裁，达到显示的目的 代码跟之前有做删减 import QtQuick 2.0 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 Item { //该控件绘制角度为 顺时针 property int minimumuValue: 0 p...
微信小程序画布圆形进度条显示效果
08-27
微信小程序画布圆形进度条显示效果 微信小程序画布圆形进度条显示效果是一种常见的UI效果，在微信小程序中，开发者可以使用Canvas绘图来实现圆形进度条的显示。本文将详细介绍微信小程序画布圆形进度条显示效果的...
canvas实现圆形进度条动画的示例代码
01-19
本文介绍了canvas实现圆形进度条动画，分享给大家，具体如下： 先给大家看看效果图，然后在上代码。 进度条动画 1. canvas的HTML部分很简单就一个canvas标签 canvas画布的宽高是自身的属性，要在行间样式设置，若是...
圆形进度条
12-11
在这个过程中，我们可以使用Canvas对象来画出圆形进度条的背景、进度部分以及可能的其他装饰元素，如指示器箭头等。通常，会使用`drawCircle()`来画圆，`drawArc()`来画弧形进度，以及`drawText()`来添加文字显示...
Android自定义漂亮的圆形进度条
01-05
这几天对Android中实现画圆弧及圆弧效果中所实现的效果进行了修改，改为进度圆心进度条，效果如图所示 TasksCompletedView.java 代码如下 import android.content.Context; import android.content.res....
ucharts 圆形进度图使用
weixin_48399505的博客
11-12 3973
菜鸟成长之路 1.在官网上下载安装 参考文献 <template> <view> <view class="qiun-columns"> <view class="content"> <canvas canvas-id="canvasRing" id="canvasRing" class="canvas"></canvas> </view> </view> ...
前端 圆形进度图_web前端入门到实战：CSS实现圆形进度条
weixin_35259353的博客
12-28 333
示例图结构首先一个父级div设置相对定位，内部含有四个半圆div和一个用于遮罩的小圆div实现步骤先写出基本html结构web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频，PDF)父级div和content添加样式.box{position: relative;}.content {top: 10px;...
Android高手进阶之自定义View，自定义属性（带进度的圆形进度条）
移动编程
08-26 527
转载请注明地址：http://blog.csdn.net/xiaanming/article/details/10298163 很多的时候，系统自带的View满足不了我们功能的需求，那么我们就需要自己来自定义一个能满足我们需求的View,自定义View我们需要先继承View，添加类的构造方法，重写父类View的一些方法，例如onDraw，为了我们自定义的View在一个项目中能够重用，有时候我...
android 圆形进度View
css33的专栏
09-12 592
这个圆形进度View是根据https://blog.csdn.net/qq_32519693/article/details/76726525 进行简单的修改成自己想要的效果的 效果图   1.arrts.xml &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;resources&gt; &lt;!--圆弧进度条--&gt; ...
uni-app 实现一个环形进度条
weixin_43160044的博客
09-29 3294
uni-app实现一个环形进度条
uni-app canvas实现环形刻度进度条
ym深的博客
01-02 6665
因为项目中需要使用到一个环形刻度进度条，所以就需要实现这个需求，在uni-app插件市场找了一圈，也没有找到这种插件，只找到了一个环形进度条，所以就在该插件上修改，实现了一个环形刻度进度条 参考 uni-app插件市场：弧形进度条 微信小程序canvas画原型带刻度进度条 效果图 代码 <template> <view class="progress_box"> <canvas class="progress_bg" canvas-id="cpbg"><.
canvas 画图和进度条
sinat_35082096的博客
10-23 276
<template> <div> <canvas id="main"></canvas> </div> </template> <script> export default { data() { return { bgImage: require("../../imgs/partner/l_bg@2x.png"), carImage: require("../../img
echarts实现弧形（环形）进度条的具体配置
zuo-yiran的博客
07-03 5575
完成效果图如下： 简单例子说明：任务总数为3，已完成1，未完成2。 弧形进度条实现data值： data[0]:标题占固定位置为环形的25%，计算：(1+2)4/30.25=1， data[1]:已完成任务数，具体值为1 data[2]:未完成任务数，具体值为2 注： 1、startAngle值设为315，是为了让弧形图看起来对称且标题说明占25%。 2、此处用data[0]中name的值作为data[1]中具体的值来实现图示效果，即：用标题站位的name值来模仿已完成任务的具体值进行说明。 随机例子说明
Android自定义图表库（一）：圆形进度图
Ade-rui的博客
11-13 1757
导航效果预览自定义View第一步：确认View的大小自定义View第二步：绘制内容总结 效果预览 自定义View第一步：确认View的大小 无论是自定义一个View还是ViewGroup我们必须得先为其制定在不同MeasureSpecMode下的大小，我这里就不讲解什么绘制源码了什么的，我们就直接实战。 我们在onMeasure中需要调用setMeasuredDimension(width,he...
css圆形进度条动画
最新发布
04-30
CSS 圆形进度条动画是通过 CSS3 中的 @keyframes 规则和 transform 属性来实现的。以下是一个简单的圆形进度条动画示例： HTML 代码： ``` <div class="progress-bar"></div> ``` CSS 代码： ``` .progress { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值