SVG path绘制百分比圆弧,给力啊

  1. 云栖社区>
  2. 博客>
  3. 正文

SVG path绘制百分比圆弧,给力啊

沉默王二 2016-05-25 17:30:32 浏览858
展开阅读全文
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/51500220

利用SVG的circle可以绘制百分比圆弧,但总觉得有点不够高端,相比起来,我更喜欢利用SVG的path来绘制百分比圆弧,因为其中会利用到绘制圆弧的基本数学知识(我已经把数学还给了老师,从网络上抓取别人的成果,进行了改造),这样就觉得很有装逼范。

一、效果图

这里写图片描述

二、实现方法

页面元素构成

<svg height="108" version="1.1" width="108" xmlns="http://www.w3.org/2000/svg"
 style="overflow: hidden; position: relative; left: -0.5px;">
    <path class="ring" rate="${deal.attrs.rate}" fill="none" x="54" y="7" r="47" stroke="#fd30ae" d="M54,7A47,47,0,1,1,11,71" stroke-width="4" />
</svg>

是不是看的有点晕,如果你不熟悉SVG的话,先看svg中path标签的用法,对path的基本属性进行了解。

另外呢,我给path赋予了rate(百分比)、x(moveto的x坐标)、y(moveto的y坐标)、r(圆弧的半径)的属性。

赋值

// 圆弧
$("path.ring", $p).each(function() {
    var $this = $(this);

    YUNM.debug('path.ring' + $this.selector);

    var r = $this.attr("r");
    var x = $this.attr("x"), rate = $this.attr("rate");

    // 给path 设置属性
    if (rate < 100) {
        var progress = rate / 100;

        // 将path平移到我们需要的坐标位置
        $this.attr('transform', 'translate(' + x + ',' + x + ')');

        // 计算当前的进度对应的角度值
        var degrees = progress * 360;

        // 计算当前角度对应的弧度值
        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, -r, 'A', r, r, 0, lenghty, 1, x, y ];

        $this.attr('d', descriptions.join(' '));
    }
});

这段代码就主要根据圆弧的起始点、半径、圆弧的进度来计算圆弧的终点。这段代码中用到的数学知识我肯定是不记得了,网络上其他程序员提供的demo。

三、简单改造后的源码,可直接运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5中的SVG属性实现圆形进度条效果</title>
</head>
<body>


    <svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg">   
    <path id="ring" fill="none" stroke="#fd30ae" />
    </svg>
    <script>



    var path = document.getElementById('ring');
    var r=100;

    var progress=0.6;

    //将path平移到我们需要的坐标位置
    ring.setAttribute('transform', 'translate('+r+','+r+')');

    // 计算当前的进度对应的角度值
    var degrees = progress * 360;  

    // 计算当前角度对应的弧度值
    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, -r, 'A', r, r, 0, lenghty, 1, x, y];

    // 给path 设置属性
    path.setAttribute('d', descriptions.join(' '));
    </script>
</body>
</html>

这是网络上其他朋友提供的计算方法,我只做了简单的修改,插入到我的项目中。本篇主要用来推广SVG的path绘制百分比圆弧的方法,希望需要的人能够及早得到帮助,感谢!

网友评论

登录后评论
0/500
评论
沉默王二
+ 关注