好久之前寫過一個可拖拽圓形進度條的dome，中間有網友反饋過一些問題，最近比較閑有時間修改了一些問題也做了一些優化，并封裝成組件，基于canvas實現，只需傳入放置組件dom容器，任何框架均可直接使用；

codepen 示例如下：https://codepen.io/pangyongsheng/pen/XRmNRK

一、如何使用

npm下載

執行 npm i drag-arc -S 或 cnpm i drag-arc -Simport?DragArc?from?'drag-arc';

new?DragArc({

el:?dom,

value:?10,

change:?(v)?=>?{

console.log(v)

},

...

})

或者 也可從項目下載dist/dist/drag-arc.min.js，直接通過srcipt標簽引入

其中dom為放置組件HTML容器,可通過ref獲取;

主要屬性方法(詳見github/npm)

項目地址：https://github.com/pangyongsheng/canvas-arc-draw

npm地址：https://www.npmjs.com/package/drag-arcNameDescriptionTypeDefaultRequiredel放置組件的DOM元素ElementnoneY

change當前值變化時觸發的事件，回調參數為當前進度值Number(0-100)Function()=>{}N

startDeg滑動圓弧的起始弧度Number (0-2)0N

endDeg滑動圓弧的結束弧度Number (0-2)1N

value默認值Number (0-100)0N

textShow顯示文字BooleantrueN

color外側圓弧顏色String,Array["#06dabc", "#33aaff"]N

slider滑塊半徑Number#FFFN

innerColor內側弧度的顏色String#cccN

outColor外側圓弧背景顏色String,Array#cccN

innerLineWidth內側弧線寬Number1N

outLineWidth外側弧線寬Number20N

counterclockwise逆時針方向BooleantrueN

sliderColor滑塊顏色String#CCCN

sliderBorderColor滑塊邊框顏色String#fffN

二、實現方法簡介

1、繪制位置幾何關系

如圖所示，以canvas畫布中心點建立坐標系，則有：

滑塊位置與弧度關系：

由圓的參數方程得出

x=rcosφ

y=rsinφ

鼠標移動位置與弧度關系：

通過事件回調參數 我們可以獲得 鼠標mousemove事件或者移動端touchmove事件的x,y坐標，可計算tan值為

tanφ = y/x;

再通過反三角函數有可得：

φ=arctan(tanφ)

以上基本的位置關系已經得出；

2、js實現中的幾個問題

(1)坐標的轉化方法

由于上述位置關系是基于中心坐標實現的，而canvas繪制坐標是以左上角為原點實現的，故需要實現兩種坐標的轉化關系；

(2)canvas弧度位置與正常弧度位置的轉化

下圖是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

總結

以上是生活随笔為你收集整理的java圆形进度条_可拖拽圆形进度条组件（支持移动端）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。