可拖拽圆形进度条组件(支持移动端)(canvas)
可拖拽的弧形进度条组件（支持移动端）
实现介绍
这是一个支持任意弧度开始结束，正时针、逆时针，样式可配置的圆形可拖动进度条
使用方法 Using npmnpm i drag-arc -S
import DragArc from 'drag-arc';
也可下载直接引入js
<script src= 'dist/drag-arc.min.js'>
调用
new DragArc({ el: dom, value: 10, change: (v) => { console.log(v) }, ... }) 属性
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
| el | 放置组件的DOM元素 | Element | none | Y |
| change | 当前值变化时触发的事件，回调参数为当前进度值Number（0-100） | Function | ||
| mouseUp | 滑动结束，鼠标释放时调用该方法 | Function | ||
| startDeg | 滑动圆弧的起始弧度 | Number | 0 | |
| endDeg | 滑动圆弧的结束弧度 | Number | 2 | |
| value | 默认值 | Number (0-100) | 0 | |
| textShow | 显示文字 | Boolean | true | |
| innerColor | 内侧弧度的颜色 | String | ||
| outColor | 外侧圆弧背景颜色 | String,Array | ||
| innerLineWidth | 内侧弧线宽 | Number | 1 | |
| innerLineDash | 内侧弧线是否为虚线,如为虚线直接设置虚线线宽，默认不显示虚线 | Number | 0 | |
| outLineWidth | 外侧弧线宽 | Number | 20 | |
| counterclockwise | 逆时针方向 | Boolean | true | |
| sliderColor | 滑块颜色 | String | ||
| sliderBorderColor | 滑块边框颜色 | String | #fff | |
| showDrag | 是否显示滑块 | Boolean | true |
这里startDeg，endDeg 设置为任意数值n,表示表示n * π, 如示例为 0 和1 ，表示0 到 π ；
方法| draw(n) | 设置当前进度为n | Number (0-100) |
|---|
实现方法查看
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
