1. 首页

使用React Hook写的一个圆形进度条组件

react-arc-progress.js

使用canvas绘制的react圆弧形进度条组件,由于使用了React Hook,依赖的React版本需要 >=16.8.0 Github地址

arc-progress

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

使用React Hook写的一个圆形进度条组件

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

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

作者:飞翔荷兰人
链接:https://juejin.im/post/5d915488e51d4577e9749b70

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:使用React Hook写的一个圆形进度条组件

链接:https://www.javascriptc.com/3792.html

« 一起来React Hook学习怎么用吧
8 个你必须要掌握的 GitHub 实用小技能»
Flutter 中文教程资源

相关推荐

QR code