好久之前寫(xiě)過(guò)一個(gè)可拖拽圓形進(jìn)度條的dome，中間有網(wǎng)友反饋過(guò)一些問(wèn)題，最近比較閑有時(shí)間修改了一些問(wèn)題也做了一些優(yōu)化，并封裝成組件，基于canvas實(shí)現(xiàn)，只需傳入放置組件dom容器，任何框架均可直接使用；

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

一、如何使用

npm下載

執(zhí)行 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)

},

...

})

或者 也可從項(xiàng)目下載dist/dist/drag-arc.min.js，直接通過(guò)srcipt標(biāo)簽引入

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

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

項(xiàng)目地址：https://github.com/pangyongsheng/canvas-arc-draw

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

change當(dāng)前值變化時(shí)觸發(fā)的事件，回調(diào)參數(shù)為當(dāng)前進(jìn)度值Number(0-100)Function()=>{}N

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

endDeg滑動(dòng)圓弧的結(jié)束弧度Number (0-2)1N

value默認(rèn)值Number (0-100)0N

textShow顯示文字BooleantrueN

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

slider滑塊半徑Number#FFFN

innerColor內(nèi)側(cè)弧度的顏色String#cccN

outColor外側(cè)圓弧背景顏色String,Array#cccN

innerLineWidth內(nèi)側(cè)弧線(xiàn)寬Number1N

outLineWidth外側(cè)弧線(xiàn)寬Number20N

counterclockwise逆時(shí)針?lè)较駼ooleantrueN

sliderColor滑塊顏色String#CCCN

sliderBorderColor滑塊邊框顏色String#fffN

二、實(shí)現(xiàn)方法簡(jiǎn)介

1、繪制位置幾何關(guān)系

如圖所示，以canvas畫(huà)布中心點(diǎn)建立坐標(biāo)系，則有：

滑塊位置與弧度關(guān)系：

由圓的參數(shù)方程得出

x=rcosφ

y=rsinφ

鼠標(biāo)移動(dòng)位置與弧度關(guān)系：

通過(guò)事件回調(diào)參數(shù) 我們可以獲得 鼠標(biāo)mousemove事件或者移動(dòng)端touchmove事件的x,y坐標(biāo)，可計(jì)算tan值為

tanφ = y/x;

再通過(guò)反三角函數(shù)有可得：

φ=arctan(tanφ)

以上基本的位置關(guān)系已經(jīng)得出；

2、js實(shí)現(xiàn)中的幾個(gè)問(wèn)題

(1)坐標(biāo)的轉(zhuǎn)化方法

由于上述位置關(guān)系是基于中心坐標(biāo)實(shí)現(xiàn)的，而canvas繪制坐標(biāo)是以左上角為原點(diǎn)實(shí)現(xiàn)的，故需要實(shí)現(xiàn)兩種坐標(biāo)的轉(zhuǎn)化關(guān)系；

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

下圖是canvas的弧度位置恰好與我們正常計(jì)算的方向是相反的，同樣需考慮弧度的轉(zhuǎn)換；

(3)Math.atan方法返回值與實(shí)際弧度的關(guān)系

由于Math.atan() 函數(shù)返回一個(gè)數(shù)值的反正切[- π/2 , π/2 ],

而實(shí)際中我們需要獲得到[0-2π]直接的值，所以在通過(guò)鼠標(biāo)位置獲取弧度值時(shí)需要通過(guò)Math.atan(y/x)和xy在中心坐標(biāo)的正負(fù)綜合判斷其所在象限從何獲取實(shí)際的獲取弧度值；

(4)弧度與進(jìn)度條值得關(guān)系

由于鼠標(biāo)移動(dòng)觸發(fā)繪圖方法是較為連續(xù)的動(dòng)畫(huà)效果，而進(jìn)度是間隔的，

這里我們需要實(shí)現(xiàn)個(gè)類(lèi)似d3js中domain和range的比例關(guān)系。

這里我們將值[0,100]對(duì)應(yīng)弧度比例為[startDeg, endDeg]

(5)終點(diǎn)的判斷

由于鼠標(biāo)移動(dòng)的位置是任意的，可能導(dǎo)致滑塊到達(dá)終點(diǎn)后由于鼠標(biāo)移動(dòng)到了起點(diǎn)時(shí)，滑塊也直接從終點(diǎn)移動(dòng)到起點(diǎn)，故需對(duì)起點(diǎn)終點(diǎn)做判斷，到達(dá)起點(diǎn)后不可再向后滑動(dòng)，到達(dá)終點(diǎn)后不可再向前滑動(dòng)；

3、詳細(xì)實(shí)現(xiàn)方法可以參考這篇文章

https://www.cnblogs.com/pangys/p/6837344.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。