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

5

图片描述

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

定义svg绘图区域

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

<svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

绘制一个圆形

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

<circle cx="250" cy="250" r="40" stroke="black" stroke-width="2" fill="red"/>

定义一个path路径区域

<path id="ring" fill="#76B13C" />

使用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(' '));

在扇形上覆盖一个圆形

<circle cx="100" cy="100" r="82" fill="#FFF" />

封装绘图函数

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(' '));
}    

你可能感兴趣的

rand 作者 · 2015年12月06日

主要是这个使用场景不是AI能解决的,举个例子,后台实时传递过来一个下载进度的数值,需要我们在前端绘制进度条,最佳的办法就是使用svg来绘图,如果用ai,就需要绘制一百张从0到100的进度图,然后不停的替换,太low了。当然canvas也可以解决这个问题,但是canvas在移动端绘图,会有严重的锯齿,效果不理想。你可以观摩一下嘀嘀打车在微信公众号上叫车之后的等待时间进度条,我觉得那个就是用svg做的

+1 回复

wing_kai · 2015年12月06日

对于图形的制作,为什么不用ai,直接写代码感觉非常不直观。

回复

苟且 · 2017年05月11日

似乎不能构成一个100%的圆环

回复

载入中...