可拖拽圓形進度條組件(支持移動端)

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

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

 

一、如何使用

npm下載

執行 npm i drag-arc -S 或 cnpm i drag-arc -S

 
import 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-arc

Name Description Type Default Required
el 放置組件的DOM元素 Element none Y
change 當前值變化時觸發的事件,回調參數為當前進度值Number(0-100) Function ()=>{} N
startDeg 滑動圓弧的起始弧度 Number  0 N
endDeg 滑動圓弧的結束弧度 Number 1 N
value 默認值 Number (0-100) 0 N
textShow 显示文字 Boolean true N
color 外側圓弧顏色 String,Array [“#06dabc”, “#33aaff”] N
slider 滑塊半徑 Number #FFF N
innerColor 內側弧度的顏色 String #ccc N
outColor 外側圓弧背景顏色 String,Array #ccc N
innerLineWidth 內側弧線寬 Number 1 N
outLineWidth 外側弧線寬 Number 20 N
counterclockwise 逆時針方向 Boolean true N
sliderColor 滑塊顏色 String #CCC N
sliderBorderColor 滑塊邊框顏色 String #fff N

二、實現方法簡介

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

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

網頁設計公司推薦不同的風格,搶佔消費者視覺第一線

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

※別再煩惱如何寫文案,掌握八大原則!

您可能也會喜歡…