A long time ago, I wrote dome with a draggable circular progress bar. There were some problems reported by netizens. Recently, I have time to modify some problems and make some optimization, and package them into components.

Codepen The following is an example: codepen. IO/PangyongShe…


A, how to use

NPM download

Execute NPM I drag-arc-s or CNPM I drag-arc-s

import DragArc from 'drag-arc'; New DragArc({el: dom, value: 10, startDeg: 0, endDeg: 1.8, change: (v) => {console.log(v)}, new DragArc({el: dom, value: 10, startDeg: 0, endDeg: 1.8, change: (v) => {console.log(v)},... })Copy the code
Alternatively, you can download dist/dist/ Drag-arc.min.js from the project and import it directly under the SRCIPT tag

Dom is the HTML container for placing components, which can be obtained through ref and other methods.

StartDeg, endDeg Can be any value n, indicating n * π. For example, 0 and 1 indicate 0 to

PI;

Sliding direction can also be configured;

Main attribute methods (see Github/NPM)

Project address: github.com/pangyongshe… NPM address: www.npmjs.com/package/dra…

Name Description Type Default Required
el The DOM element that holds the component Element none Y
change Number (0-100) is a callback to the current progress value. Function () = > {} N
startDeg The initial radian of a sliding arc Number 0 N
endDeg The ending radian of a sliding arc Number 1 N
value The default value Number (0-100) 0 N
textShow According to the text Boolean true N
color Outer arc color String,Array [“#06dabc”, “#33aaff”] N
slider Radius of the slider Number #FFF N
innerColor The color of the inside radian String #ccc N
outColor Outer arc background color String,Array #ccc N
innerLineWidth The inner arc is wide Number 1 N
outLineWidth The outer arc is wide Number 20 N
counterclockwise Counterclockwise direction Boolean true N
sliderColor The slider color String #CCC N
sliderBorderColor Slider border color String #fff N

Two, the implementation method brief introduction

1. Draw geometric relationship of position

As shown in the figure, the coordinate system is established with the center point of canvas canvas, then:

Relationship between position of slider and radian:

From the parametric equation of the circle x=rcosφ y=rsinφ

Relationship between mouse movement position and radian:

Through the event callback parameter, we can obtain the x and y coordinates of the mousemove event or touchmove event on the mobile terminal. The calculated tan value is tanφ = y/x; Then through the inverse trigonometric function, we can get: φ=arctan(tanφ)

The above basic position relation has been obtained;

2. Several problems in JS implementation

(1) Coordinate transformation method

Since the above position relation is realized based on the center coordinate, while the canvas coordinate is realized based on the upper left corner as the origin, it is necessary to realize the transformation relation of the two coordinates.

(2) Conversion of Canvas radian position to normal radian position

The following figure shows that the radian position of canvas is exactly opposite to the direction we normally calculate, and the conversion of radian also needs to be considered.

(3) The relation between the return value of math.atan method and the actual radian

Since math.atan () returns the inverse tangent of a number, and in practice we need to obtain the direct value of [0-2π], Therefore, when obtaining the radian value through the mouse position, it is necessary to judge from the positive and negative combination of math.atan (y/x) and XY in the center coordinate where it is located to obtain the actual radian value;

(4) The relationship between radian and progress bar value

Since the drawing method triggered by mouse movement is a relatively continuous animation effect, and the progress is spaced, we need to realize a proportional relationship similar to domain and range in D3JS. Here we have the value [0,100] corresponding to the radian ratio [startDeg, endDeg]

(5) Judgment of end point

When the mouse moves to the starting point, the slider moves directly from the end point to the starting point. Therefore, it is necessary to judge the starting point and the end point. After reaching the starting point, it cannot slide backward, and after reaching the end point, it cannot slide forward.

(5) Event frequency and number of animation frames

Mousemove time frequency maximum frequency is about 1000/7, for normal animation frame is about 1000/16, use requestAnimationFrame throttled;

3, detailed implementation method can refer to this article

www.cnblogs.com/pangys/p/68…