使用React Hook寫的一個圓形進度條組件

react-arc-progress.js

使用canvas繪製的react圓弧形進度條組件，因爲使用了React Hook，依賴的React版本須要 >=16.8.0 Github地址

Installation

npm install react-arc-progress -S
複製代碼

Usage

import ArcProgress from 'react-arc-progress';

export default class MyArcProgress extends Component {
  state = {
    progress: .782,
    text: '6439.68',
  }
  
  render() {
    const {progress, text} = this.state;
    
    return (
      <ArcProgress progress={progress} text={text} observer={(current) => { const { percentage, currentText } = current; console.log('observer:', percentage, currentText); }} animationEnd={({ progress, text }) => { console.log('animationEnd', progress, text); }} /> ); } } 複製代碼

Options

Option	type	Description
size	number	生成進度條canvas容器的大小，默認爲200
progress	number (必傳)	設置進度條的進度，取值範圍爲0 - 1
text	string	設置進度條文字
arcStart	number	設置圓環的起始點，具體用法見下
arcEnd	number	設置圓環的結束點，具體用法見下
thickness	number	設置圓環進度條的厚度
fillThickness	number	設置圓環進度條填充內容的厚度，不設置該項時默認與thickness一致
emptyColor	string	設置圓環進度條爲空部分的顏色
fillColor	string or 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	監聽進度條動畫變化時的回調

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用法一致