【js类库Raphaël】基于svg中的path动态绘制40%表示的环型图

来源：互联网发布：软件测试技术维护编辑：程序博客网时间：2024/05/16 04:56

一、可供参考的文档资料。

raphaeljs官网：http://raphaeljs.com/

w3c关于path的介绍：http://www.w3.org/TR/2003/REC-SVG11-20030114/paths.html

mdn关于path的介绍（英文版）：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

mdn关于path的介绍（中文版）：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths

二、简介

raphaeljs目前支持的浏览器： Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+, Internet Explorer 6.0+.

因为支持ie6，所以应用可以更广泛些。

超级喜欢的一个demo：http://raphaeljs.com/polar-clock.html

因为它的部分功能是可以满足目前项目中的需求的。

当然，还有很多好看和实用的demo。

基本图形的画法，很简单，可以参考mdn（https://developer.mozilla.org/zh-CN/docs/Web/SVG）就可以掌握。

本文介绍使用path绘制环型图。

粗略介绍下：

path中的M表示move to，L表示line to, A表示arc.

弧形命令A是另一个创建SVG曲线的命令。基本上，弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，另外已知两个点（它们的距离在圆的半径范围内），这时我们会发现，有两个路径可以连接这两个点。每种情况都可以生成出四种弧形。所以，为了保证创建的弧形唯一，A命令需要用到比较多的参数：

A rx ry x-axis-rotation large-arc-flag sweep-flag x ya rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

rx ry表示起点坐标，x y表示终点坐标。下图可以更好理解。

三、动手

给个实例吧。如下是我在理解的过程中写的代码。大家可以从官网下载raphaeljs，然后运行如下的代码。

<html><head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta charset="utf-8">        <title>Carl Test</title>        <script src="./js/raphael.js"></script>        </head><body><div><canvas id="myc" width="300" height="300"></canvas> <div > 　　<svg height="52" version="1.1" width="52" xmlns="http://www.w3.org/2000/svg" style="position:relative">   　　 <desc>Created with Raphaël 2.1.2</desc>    　　<path style="" fill="none" stroke="#f0f0f0" d="M26,4A22,22,0,1,1,25.99,4" stroke-width="6"/>    　　<path style="" fill="none" stroke="#69d2ca" d="M26,4A22,22,0,0,1,37.78818948953793,44.57521436104433" stroke-width="6" />    </svg></div> <div id="holder"></div><script>    var c = document.getElementById('myc');    var ctx = c.getContext('2d');    var init= true;    for(var alpha=0;alpha<1000;alpha++){    var R=100;    var a = (90 - alpha) * Math.PI / 180,                            x = 120 + R * Math.cos(a),                            y = 120 - R * Math.sin(a);    if(init){     ctx.moveTo(x,y)    }else{        ctx.lineTo(x,y);    }    init=false;            }    ctx.stroke();</script><script>window.onload = function () {                var r = Raphael("holder", 200, 200);                                                  r.customAttributes.arc = function (value, total, R) {                                    var alpha = 360 / total * value,                        a = (90 - alpha) * Math.PI / 180,                        x = 100 + R * Math.cos(a),                        y = 100 - R * Math.sin(a),                                                path;                    if (total == value) {                        path = [["M", 100, 100 - R], ["A", R, R, 0, 1, 1, 99.99, 100 - R]];                    } else {                        path = [["M", 100, 100 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];                    }                    return {path: path};                };                                (function(){                var value=40,total=100,R=40;                    var t = r.path().attr({stroke: "#f0f0f0", "stroke-width": 10}).attr({arc:[100,total,R]});//100%                    var sec = r.path().attr({stroke: "#69d2ca", "stroke-width": 10}).attr({arc: [0, total, R]});//0%                                                    sec.animate({arc: [value, total, R]}, 900, ">");//这个">"是表示动画效果的参数，900ms的时间动态画出40%的弧                })();                };</script></body></html>

四、总结

效果图：

为什么会有3个呢？

第一个圆是为了理解圆的参数方程，即如下代码所代表的含义。所以我用canvas画了出来。因为本人感觉使用canvas画弧或者圆，比svg好理解。只要理解这个算法就好。

  var a = (90 - alpha) * Math.PI / 180,                            x = 120 + R * Math.cos(a),                            y = 120 - R * Math.sin(a);

第二个圆，是直接使用svg画出来的。

第三个圆，就是raphaeljs生成在id=holder的div标签里的svg生成的环形图，亮点是动态显示。

京东旗下的金融板块，好多图都是使用Raphaël做的。如下的筹集进度就是一个环形图。

http://bill.jr.jd.com/buy/list.htm

你要坚强，坚强的足以认识自己的弱点；你要勇敢，勇敢的足以面对自己的恐惧；你要堂堂正正。在遇到挫折时能够昂首而不背躬屈膝；你要能够面对掌声，在胜利时能够谦逊而不趾高气扬。真正的伟大直率真诚，真正的贤人虚怀若谷，真正的强者温文尔雅。——萨利·布什（林肯的继母教育林肯)

0 0