使用canvas绘制的圆弧形进度条插件arc-progress.js

所属分类:UI-加载

 16746  205  查看评论 (3)
分享到微信朋友圈
X
使用canvas绘制的圆弧形进度条插件arc-progress.js ie兼容12

更新时间:2019-09-19 23:18:54

arc-progress.js

Installation

npm install arc-progress -S

使用方法

使用canvas绘制的圆弧形进度条

<div id='progress-container'></div>
<script>
  const customText = [{text: '%', size: '12px', color: '#000', x: 142, y:102}];

  const arcProgress = new ArcProgress({
    el: '#progress-container',
    progress: .68,
    speed: 5,
    value: '5439.92',
    size: 200,
    customText,
    observer(e, t) {
      console.log('observer the animation', e, t);
    },
    animationEnd(e) {
      console.log('the animation is end', e);
    }
  });
</script>

如果在React或VUE中使用,则在生命周期中实例化可以获得真正的DOM节点。

在React代码中:

import ArcProgress from 'arc-progress';
class App extends React.Component {  componentDidMount() {    const customText = [{text: '%', size: '12px', color: '#000', x: 142, y:102}];    
const arcProgress = new ArcProgress({
      el: '#progress-container',
      progress: .68,
      speed: 5,
      value: '5439.92',
      size: 200,
      customText,      observer(e, t) {        console.log('observer the animation', e, t);
      },      animationEnd(e) {        console.log('the animation is end', e);
      }
    });
  }  render() {    return(      <div>
        <div id='progress-container' />
      </div>
    );
  }
}

选项

在实例化时传入如下可选的option

选项类型描述
elstring or dom (required)容器的class 或者 id名,也可以直接传入 dom 节点的引用|
progressnumber (required)设置进度条的进度,取值范围为0 - 1
sizenumber生成进度条canvas容器的大小,默认为200
textstring设置进度条文字
arcStartnumber设置圆环的起始点,具体用法见下
arcEndnumber设置圆环的结束点,具体用法见下
thicknessnumber设置圆环进度条的厚度
fillThicknessnumber设置圆环进度条填充内容的厚度,不设置该项时默认与`thickness`一致
emptyColorstring设置圆环进度条为空部分的颜色
fillColorstring or object设置圆环进度条填充部分的样式,可以设置纯色或渐变色,也可以使用图片进行填充,具体用法见下
lineCapstringS设置圆环进度条末端的类型,有3个可选的值,分别是:`butt`, `round`, `square`。默认值是 `round`
speednumber设置动画速度阈,范围为-100到100,默认为0
animationboolean or number设置动画持续时间,单位为毫秒值,当取值为`false`时,没有过渡动画
textStyleobject设置文字样式,具体用法见下
customTextarray设置自定义的文字内容,具体用法见下
animationEndfunction进度条动画结束时候的回调
onErrorfunction捕获错误的回调
observerfunction监听进度条动画变化时的回调

方法

实例化后可调用的方法

名称描述
updateProgress更新进度条的方法,传递参数optios如上一致(没有`el`参数)
destroy销毁进度条的方法

Options 说明

arcStart 和 arcEnd

arc-small.png


如图所示标注了弧形的起点和重点,方向为顺时针。如果你想绘制一个圆形进度条,可以设置`arcStart``-90``arcEnd`为`270`。如果想绘制一个半圆,可以设置`arcStart`为`180`,`arcEnd`为`360`。可以根据需要调整绘制起止角度数。

fillColor

fillColor为被填充的进度条颜色,可以传入色值为其定义颜色,如(#fe4d3c)。

如果想使用渐变色填充,改参数需要设置为对象类型,例如`{gradient: [color 1, color2,  color 2]}`,则会生成三个颜色的径向渐变色。

如使用图片填充,则需要将参数设置为对象格式`{image: url}`,传入图片的url地址。例如 `fillColor: {image: 'http://img.com/fillImg'}` 时,则会使用该图片进行填充。

textStyle

设置传入`text`参数的文字样式,它需要为对象类型,可选的内容如下

名称类型描述
sizestring设置文字大小, 如 `18px`
colorstring设置文字颜色, 如 `#fa0556`
fontstring设置文字字体, 如 `Microsoft YaHei`
xnumber设置文字对齐的x轴
ynumber设置文字对齐的y轴

customText

customText 选项可以自定义文字内容,它的格式为数组,可以定义多个文字。其每个用法与`textStyle`参数一致,只是多了`text`字段。

名称类型描述
textstring设置文字内容
others
其他参数内容与`textStyle`用法一致

相关插件-加载

jQuery nprogress.js页面加载进度条

jQuery nprogress.js页面加载进度条显示当前网页的加载进度
  加载
 64366  406

jQuery会员等级进度条(原创)

jQuery多节点点亮会员等级进度条
  加载
 34570  356

圆形进度条,再也不怕圆形进度条不兼容不帅气

圆形进度条原理。转化为jquery也非常方便。 原理都差不多(原创)
  加载
 88833  430

纯css3制作绿色loading加载动画特效

纯css3制作绿色loading加载动画特效里面包含14款不同效果的绿色清新loading加载特效。
  加载
 55904  554

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    原世间在无沙币需求 0
    2021/11/29 16:54:16
    渐变色怎么整啊。 回复
    龙醒杰 0
    2020/7/9 12:39:31
    引用了vue.js插件就使用不了。。。 回复
    晴天 0
    2020/4/29 9:19:08
    怎么设置渐变啊 gradient: [color 1, color2, color 2]这个属性没用 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复