基于canvas的jquery圆环进度条插件

转载自前端开发博客 (http://caibaojian.com/jquery-circle-progress.html)

基于canvas的jquery圆环进度条插件,支持纯色、渐变颜色、支持文字逐渐变化、支持定义起始角等一切圆弧的属性和方法。


zV5VUQG.png



使用方法:

<scriptsrc="jquery.min.js">script>
<scriptsrc="jquery-circle-progress/dist/circle-progress.js">script>

<divid="circle">div>

<script>    $('#circle').circleProgress({        value:0.75,        size:80,        fill: {            gradient: ["red", "orange"]        }    });script>

选项:

value必须值,圆环的百分比从0到1.
默认值: 0
size圆环大小
Default: 100
startAngle初始角度
Default: -Math.PI
reverse是否逆时针
Default: false
thickness圆环的宽度,默认为1/4的大小
Default: "auto"
lineCapArc line cap: "butt", "round" or "square" - read more
Default: "butt"
fill圆环的填充颜色
- { color: "#ff1e41" }
- { color: 'rgba(255, 255, 255, .3)' }
- { gradient: ["red", "green", "blue"] }
- { gradient: [["red", .2], ["green", .3], ["blue", .8]] }
- { gradient: [ ... ], gradientAngle: Math.PI / 4 }
- { gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
- { image: "http://i.imgur.com/pT0i89v.png" }
- { image: imageInstance }
- { color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
Default: { gradient: ["#3aeabb", "#fdd250"] }
emptyFill空白的圆环
Default: "rgba(0, 0, 0, .1)"
animation动画设置 See jQuery animations.
You may also set it to false
Default: { duration: 1200, easing: "circleProgressEase" }
"circleProgressEase" is just a ease-in-out-cubic easing
animationStartValue动画默认开始从那个值开始运动。
Default: 0.0

事件

circle-animation-startfunction(event):
- event - jQuery event
circle-animation-progressfunction(event, animationProgress, stepValue):
- event - jQuery event
- animationProgress - from 0.0 to 1.0
- stepValue - current step value: from 0.0 to value
circle-animation-endfunction(event):
- event - jQuery event

其他:

You can get the <canvas> (but only if the widget is already inited):

$('#circle').circleProgress({ value:0.5 });
var canvas = $('#circle').circleProgress('widget');

You can get the CircleProgress instance:

var instance = $('#circle').data('circle-progress');

You can redraw existing circle (but only if the widget is already inited):

$('#circle').circleProgress({ value:0.5, fill: { color:'orange' }});
$('#circle').circleProgress('redraw'); // use current configuration and redraw
$('#circle').circleProgress(); // alias for 'redraw'
$('#circle').circleProgress({ size:150 }); // set new size and redraw

You can change the default options:

$.circleProgress.defaults.size=50;

下载和演示:

下载地址在线演示 在线制作一个



2 评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注