使用canvas繪製的圓弧形進度條插件

arc-progress.js

使用canvas繪製的圓弧形進度條

若是你想在react中使用，可使用(github.com/Hzy0913/arc… "react-arc-progress")組件

Installation

npm install arc-progress -S
複製代碼

直接引入js文件

若是選使用<script>直接引入js文件，可點擊下載arc-progress.min.js文件。

Usage

<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('監聽動畫進度', e, t);
    },
    animationEnd(e) {
      console.log('動畫執行結束', e);
    }
  });

</script>
複製代碼

若是在React中使用，可使用react-arc-progress 組件

若是在vue中使用，在能夠獲取真實dom節點的生命週期裏進行實例化

在Vue中:

<template>
  <div>
    <div id='progress-container' />
  </div>
</template>

<script>
  import ArcProgress from 'arc-progress';

  export default {
    data () {
      return {
        customText: [{text: '%', size: '12px', color: '#000', x: 142, y:102}]
      }
    },
    mounted() {
      arcProgress = new ArcProgress({
        el: '#progress-container',
        progress: .68,
        speed: 5,
        value: '5439.92',
        size: 200,
        customText: this.customText,
        observer(e, t) {
          console.log('observer the animation', e, t);
        },
        animationEnd(e) {
          console.log('the animation is end', e);
        }
      });
    }
  }
</script>
複製代碼

Options

在實例化時傳入以下可選的option

Option	type	Description
el	string or dom (必傳)	容器的class 或者 id名，也能夠直接傳入 dom 節點的引用
size	number	生成進度條canvas容器的大小，默認爲200
progress	number (必傳)	設置進度條的進度，取值範圍爲0 - 1
text	string	設置進度條文字
arcStart	number	設置圓環的起始點，具體用法見下
arcEnd	number	設置圓環的結束點，具體用法見下
thickness	number	設置圓環進度條的厚度
fillThickness	number	設置圓環進度條填充內容的厚度，不設置該項時默認與thickness一致
emptyColor	string	設置圓環進度條爲空部分的顏色
fillColor	string	object
lineCap	string	設置圓環進度條末端的類型，有3個可選的值，分別是：butt, round, square。默認值是 round
speed	number	設置動畫速度閾，範圍爲-100到100，默認爲0
animation	boolean or number	設置動畫持續時間，單位爲毫秒值，當取值爲false時，沒有過渡動畫
textStyle	object	設置文字樣式，具體用法見下
customText	array	設置自定義的文字內容，具體用法見下
animationEnd	function	進度條動畫結束時候的回調
onError	function	捕獲錯誤的回調
observer	function	監聽進度條動畫變化時的回調

Methods

實例化後可調用的方法

Name	Description
updateProgress	更新進度條的方法，傳遞參數optios如上一致(沒有el參數)
destroy	銷燬進度條的方法

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參數的文字樣式，它須要爲對象類型，可選的內容以下

Name	Type	Description
size	string	設置文字大小, 如 18px
color	string	設置文字顏色, 如 #fa0556
font	string	設置文字字體, 如 Microsoft YaHei
x	number	設置文字對齊的x軸
y	number	設置文字對齊的y軸

customText

customText 選項能夠自定義文字內容，它的格式爲數組，能夠定義多個文字。其每一個用法與textStyle參數一致，只是多了text字段。

Name	Type	Description
text	string	設置文字內容
others		其餘參數內容與textStyle用法一致