很久以前，我写过一个带有圆形进度条，可以拖动的dome。有网友反馈了一些问题。最近有时间修改一些问题，做一些优化。封装成组件，基于canvas实现。任何框架都可以直接使用；codepen示例如下：[https://codepen.io/pangyongsh...]1.如何使用npm下载并执行npmidrag-arc-S或cnpmidrag-arc-SimportDragArcfrom'拖拉弧';newDragArc({el:dom,value:10,change:(v)=>{console.log(v)}})或者从工程-arc.min.js中下载dist/dist/drag，直接通过srcipt标签，其中dom是放置组件的HTML容器，可以通过ref获取；主要属性方法（详见github/npm）项目地址：https://github.com/pangyongsheng/canvas-arc-drawnpm地址：https://www.npmjs.com/package/drag-arcNameDescriptionTypeDefaultRequiredel事件放置组件的DOM元素ElementnoneYchange当前值发生变化时触发，回调参数为当前进度值Number(0-100)Function()=>{}NstartDeg滑动弧的起始弧Number(0-2)0NendDeg滑动圆弧的结束圆弧Number(0-2)1Nvalue默认值Number(0-100)0NtextShow显示文字BooleantrueNcolor外圆弧颜色String,Array["#06dabc","#33aaff"]NslidersliderradiusNumber#FFFNinnerColor内弧颜色String#cccNoutColor外弧背景颜色String,Array#cccNinnerLineWidth内弧宽Number1NoutLineWidth外弧宽Number20Ncounterclockwise逆时针方向BooleanttrueNsliderColorslidercolorString#CCCNsliderBorderColorsliderbordercolorString#fffN二、实现方法介绍1、绘制位置的几何关系如图所示，以画布中心点建立坐标系，则有是：滑块位置与弧度的关系：由圆的参数方程表示x=rcosφy=rsinφ鼠标移动位置与弧度的关系：通过事件回调参数，我们可以得到圆的x，y坐标移动端mousemove事件或touchmove事件，tan值可计算为tanφ=y/x；然后通过反三角函数可以得到：φ=arctan(tanφ)上面的基本位置关系已经得到了；2.js实现的几个问题(1)坐标变换方式因为上面的位置关系是基于中心坐标的，而canvas绘图坐标是以左上角为原点实现的，所以两个坐标的变换关系需要实现；(2)canvas圆弧位置与普通圆弧位置的变换方向相反，还需要考虑弧度的转换；(3)Math.atan方法的返回值与实际弧度的关系由于Math.atan()函数返回的是一个值的反正切值[-π/2,π/2]，在实际应用中，我们需要获取[0-2π]的直接值，所以在通过鼠标位置获取弧度值的时候，需要通过Math.atan(y/x)和xy的正负来综合判断其所在的象限在圆心坐标中获取实际获取的弧度值；(4)弧度与进度条值的关系由于鼠标移动触发的绘制方式是一个比较连续的动画效果，进度是间隔的，所以这里需要实现一个类似于d3js中domain和range的比例关系。这里我们设置弧度比对应的值[0,100]为[startDeg,endDeg](5)终点的判断由于鼠标移动的位置是任意的，当鼠标移动时可能会导致滑块到达终点移动到起点。终点移动到起点，所以需要判断起点和终点。到达起点后不能向后滑动，到达终点后不能向前滑动；3.详细的实现方法可以参考这篇文章https://www.cnblogs.com/pangys/p/6837344.html
