原文 ：http://boytnt.blog.51cto.com/966121/1074215

条状的进度条我们见得太多了，实现起来比较简单，它总是长方形的，在方形的区域里摆 放就不太好看了。随着css3的出现，圆环状的进度条开始用得越来越多，不过由于IE6/7/8不支持css3，我们只能换其它方法来实现。本文就采用 Raphael来画一个，这个组件对svg和vml进行了一个统一的封装，根据浏览器使用不同的技术实现绘制，因此IE也能用。

先上效果图：

效果还不错吧？代码其实也不复杂，抛砖引玉一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>圆形进度条</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<script src="jquery-1.4.2.js"></script>

<script src="raphael-min.js"></script>

<style>

#txt{

    width:74px;

    height:74px;

    line-height:74px;

    position:absolute;

    margin-top:-74px;

    text-align:center;

    color:#9e9fa3;

    font-size:18px;

    font-family:Arial;

}

</style>

<script>

var demo = {

    paper: null,

    init: function(){

        //初始化Raphael画布

        this.paper = Raphael("bg", 74, 74);

        //把底图先画上去

        this.paper.image("progressBg.png", 0, 0, 74, 74);

        //进度比例，0到1，在本例中我们画65%

        //需要注意，下面的算法不支持画100%，要按99.99%来画

        var percent = 0.65,

            drawPercent = percent >= 1 ? 0.9999 : percent;

        //开始计算各点的位置，见后图

        //r1是内圆半径，r2是外圆半径

        var r1 = 26, r2 = 31, PI = Math.PI,

            p1 = {

                x:37,

                y:69

            },

            p4 = {

                x:p1.x,

                y:p1.y - r2 + r1

            },

            p2 = {

                x:p1.x + r2 * Math.sin(2 * PI * (1 - drawPercent)),

                y:p1.y - r2 + r2 * Math.cos(2 * PI * (1 - drawPercent))

            },

            p3 = {

                x:p4.x + r1 * Math.sin(2 * PI * (1 - drawPercent)),

                y:p4.y - r1 + r1 * Math.cos(2 * PI * (1 - drawPercent))

            },

            path = [

                'M', p1.x, ' ', p1.y,

                'A', r2, ' ', r2, ' 0 ', percent > 0.5 ? 1 : 0, ' 1 ', p2.x, ' ', p2.y,

                'L', p3.x, ' ', p3.y,

                'A', r1, ' ', r1, ' 0 ', percent > 0.5 ? 1 : 0, ' 0 ', p4.x, ' ', p4.y,

                'Z'

            ].join('');

        //用path方法画图形，由两段圆弧和两条直线组成，画弧线的算法见后

        this.paper.path(path)

            //填充渐变色，从#3f0b3f到#ff66ff

            .attr({"stroke-width":0.5, "stroke":"#c32ec3", "fill":"90-#3f0b3f-#ff66ff"});

        //显示进度文字

        $("#txt").text(Math.round(percent * 100) + "%");

    }

};

$(function(){

    demo.init();

});

</script>

</head>

<body>

<!-- 承载图形主体 -->

<div id="bg"></div>

<!-- 承载进度文字 -->

<div id="txt"></div>

</body>

</html>

进度条由两部分组成，首先是底图 progressBg.png，74×74的png图片，把它用Raphael的image方法先画上去：

其次是用Raphael画进度部分，由两条圆弧和两条线段组成，见下图：

先从p1画顺时针圆弧到p2，然后直线到p3，然后逆时针画圆弧到p4，再直线收回p1。之后用渐变色填充一下。以65%时为例，描述这个图形的path如下(基本上就是svg的语法)：

M37 69

A31 31 0 1 1 62.079526825623375 19.778657178933337

L58.03444185374863 22.7175834403957

A26 26 0 1 0 37 64

Z

看起来有点吓人，其实分成几部分来看就简单了：

◆ 第一行表示移动到(37, 69)这个点作为起点，也就是p1；
◆ 第二行表示画一段圆弧，就是p1到p2之间的这一段；
◆ 第三行表示画一条直线，就是p2到p3之间的这一段；
◆ 第四行表示画一段圆板，已经p3到p4之间的这一段；
◆ 第五行表示封闭图形，相当于从p4连回p1；

这其中比较复杂的是圆弧的参数，其参数是这样的：

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

以第一段弧为例，各参数说明如下：

◆ rx和ry：弧的半长轴和半短轴长度，由于我们画的是正圆，所以我们用的都是31；
◆ x-axix-rotation：此段弧的x轴与水平方向夹角，由于我们画的是正圆，所以此参数没用，填了0；
◆ large-arc-flag：大角度弧线还是小角度弧线，简单点说就是画圆的哪半边，1表示大角度。由于我们画的是65%的弧，是比较大的那半个弧，所以填了1。程序里是做了判断的；
◆ sweep-flag：绕中心的方向，1表示顺时针，0表示逆时针。我们的第一段弧是顺时针的，第二段是逆时针的；
◆ x和y：弧的终点坐标；

想深入了解的同学可以参考一下这篇文章：http://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html，讲得挺不错的。

PS：如果不需要渐变，直接画一比较粗的圆弧就可以了，要简单得多。
PPS：不一定要画正圆，小修改一下，我们也可以画椭圆形的进度条。

用Raphael在网页中画圆环进度条的更多相关文章

  1. ios 画圆环进度条

    #import <UIKit/UIKit.h> @interface SNCircleProgressView : UIView /** * 进度值0-1.0之间 */ @property ...

  2. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

  3. 字体在网页中画ICON图标

    用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...

  4. H5 可堆叠的圆环进度条，支持任意数量子进度条

    by Conmajia SN: S22-W1M 由来 看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ...

  5. Vue/React圆环进度条

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...

  6. css3 制作圆环进度条

    引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...

  7. （数据科学学习手札91）在Python中妥善使用进度条

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 在日常运行程序的过程中常常涉及到循环迭代过程,对 ...

  8. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

  9. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

随机推荐

  1. lightoj1051 Good and Bad (dp)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1051 题目大意:给你一个字符串,只包含大写字母和‘?’,如果字符串中出现了连续三个以上 ...

  2. oracle 简单SQL

    1, insert into test select * from test;(造测试数据) 2, create table b as select * from a; (创建表结构一样的空表,数据可 ...

  3. Centroid - SGU 134(树的搜索)

    题目大意:给你一个树,树每个点都有一个值, 这个点的的值就等于所有儿子里面点最多的那个儿子,值最小的就叫做重心,求出重心,还有所有等于重心的点,按照升序输出. 分析:就是一个简单的搜索树,求出来最大的 ...

  4. Android实现弹出输入法时，顶部固定，中间部分上移的效果

    前言 最近做项目时碰到一个问题,在意见反馈里面,提交按钮写到顶部,当用户输入反馈意见或者邮箱手机号时,弹出的输入法会上移整个页面,导致提交按钮显示不了. 很明显,这样的界面是非常不友好的,找了一些资料 ...

  5. codeforces 710C

    C. Magic Odd Square time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. kindeditor限制html长度的问题

    <html> <head> <script charset="utf-8" src="/kindeditor/kindeditor_min. ...

  7. QStandardItemModel角色控制及QTreeView加入不同的右键菜单

    1.概述 QTreeView最长用的一个功能就是作为导航栏,像vs里的项目结构树,word的文档结构图,资源管理器的文档结构,等等都是利用树形结构组织的,在前面已经讲述了Qt中使用标准化项目模型QSt ...

  8. mybatis0206 延迟加载

    延迟加载 1.1使用延迟加载意义 在进行数据查询时,为了提高数据库查询性能,尽量使用单表查询,因为单表查询比多表关联查询速度要快. 如果查询单表就可以满足需求,一开始先查询单表,当需要关联信息时,再关 ...

  9. Java语言基础(九)

    Java语言基础(九) 一.自增运算(++) 自减运算(--) i++ 就是将i+1再赋给 i i-- 是将i-1再赋给 i 对变量i,j来说,i++ 或++i 这里没什么区别,都是将i的值加1后,再 ...

  10. 史上最全WebView使用，附送Html5Activity一份

    本文来自:http://www.jianshu.com/users/320f9e8f7fc9/latest_articles感谢您的关注. WebView在现在的项目中使用的频率应该还是非常高的.我个 ...