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

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

方法

实例化后可调用的方法

Options 说明

arcStart 和 arcEnd

如图所示标注了弧形的起点和重点，方向为顺时针。如果你想绘制一个圆形进度条，可以设置`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`参数的文字样式，它需要为对象类型，可选的内容如下

customText

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