js初级应用之svg实现环形进度条

acrazing 发布于2019-08-19 17:10 / 1417人阅读

摘要：整理一个绘制环形进度条的，需要的同学拿去用即可定义绘图区域在页面的任何位置，添加绘图面板。

整理一个svg绘制环形进度条的demo，需要的同学拿去用即可

定义svg绘图区域

在html页面的任何位置，添加svg绘图面板。定义svg绘图区域大小

绘制一个圆形

cx 和 cy 属性定义圆点的 x 和 y 坐标，单位省略为px，如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)，r 属性定义圆的半径，stroke定义描边的颜色，stroke-width定义描边宽度，fill定义填充颜色

定义一个path路径区域

使用path指令绘制扇形

首先查看一下常用的path指令,获取svg中的path，指定半径为100，进度为50，我们绘制一个扇形

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置

L = lineto(L X,Y) ：画直线到指定的坐标位置

H = horizontal lineto(H X)：画水平线到指定的X坐标位置

V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线

Z = closepath()：关闭路径

    var path = document.getElementById("ring");
    var r=100;
    var progress=50;
    
    //将path平移到我们需要的坐标位置
    ring.setAttribute("transform", "translate("+r+","+r+")");
    
    // 计算当前的进度对应的角度值
    var degrees = progress * (360/100);  
    
    // 计算当前角度对应的弧度值
    var rad = degrees* (Math.PI / 180);
    
    //极坐标转换成直角坐标
    var x = (Math.sin(rad) * r).toFixed(2);
    var y = -(Math.cos(rad) * r).toFixed(2);

    //大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0
    var lenghty = window.Number(degrees > 180);
    
    //path 属性
    var descriptions = ["M", 0, 0, "v", -r, "A", r, r, 0, lenghty, 1, x, y, "z"];
    
    // 给path 设置属性
    path.setAttribute("d", descriptions.join(" "));

在扇形上覆盖一个圆形

封装绘图函数

path参数为绘图面板id，progress为进度值0-100，r为半径

function draw(path,progress,r) {
    path.setAttribute("transform", "translate("+r+","+r+")");
    var degrees = progress * (360/100);  
    var rad = degrees* (Math.PI / 180);
    var x = (Math.sin(rad) * r).toFixed(2);
    var y = -(Math.cos(rad) * r).toFixed(2);
    var lenghty = window.Number(degrees > 180);
    var descriptions = ["M", 0, 0, "v", -r, "A", r, r, 0, lenghty, 1, x, y, "z"];
    path.setAttribute("d", descriptions.join(" "));
}

GPU云服务器云服务器环形进度条进度条实现代码进度条实现原理 php实现进度条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78255.html

基于vue的svg进度条组件

摘要：基于的简单的进度条在线在线是什么是一款基于项目二次开发的组件功能特性零依赖体积小目前支持圆环矩形的进度条配置多满足多样需求持续维护安装使用详细介绍普通模式引入例子详细介绍配置参数进度条类型进度条的初始值 svg-progress-bar 基于Vue.js的简单的svg进度条 showImg(https://segmentfault.com/img/remote/146000001282...

fasss 2019-08-22 13:46 评论0 收藏0
实现环形进度条的几种方法

摘要：环形进度条的问题，网上有很多的，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看和的东西了，基础的拿来熟悉下。环形进度条的问题，网上有很多的demo，也有各种不同的实现方式，很棒的实现也有很多，我这自己做一下一方面是想开阔一下自己的思路，一方面好久没看SVG和Canvas的东西了，基础的拿来熟悉下。 DIV + CSS3 这个是最...

Scliang 2019-08-30 15:52 评论0 收藏0
svg和css3创建环形渐变进度条

摘要：在负责的项目中，有一个环形渐变读取进度的效果的需求，于是在网上查阅相关资料整理一下。在负责的项目中，有一个环形渐变读取进度的效果的需求，于是在网上查阅相关资料整理一下。代码如下： Title ...

mo0n1andin 2019-08-02 12:04 评论0 收藏0
svg和css3创建环形渐变进度条

摘要：在负责的项目中，有一个环形渐变读取进度的效果的需求，于是在网上查阅相关资料整理一下。在负责的项目中，有一个环形渐变读取进度的效果的需求，于是在网上查阅相关资料整理一下。代码如下： Title ...

rubyshen 2019-08-29 17:21 评论0 收藏0