为了账号安全,请及时绑定邮箱和手机立即绑定

可拖拽圆形进度条组件(支持移动端)

标签:
Html5 JavaScript

好久之前写过一个可拖拽圆形进度条的dome,中间有网友反馈过一些问题,最近比较闲有时间修改了一些问题也做了一些优化,并封装成组件,基于canvas实现,只需传入放置组件dom容器,任何框架均可直接使用;

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

 https://img4.sycdn.imooc.com/5ef8289900013eb006440402.jpg

一、如何使用

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

NameDescriptionTypeDefaultRequired
el放置组件的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画布中心点建立坐标系,则有:

https://img2.sycdn.imooc.com/5ef8289a00019c9004540340.jpg

滑块位置与弧度关系:

由圆的参数方程得出
x=rcosφ
y=rsinφ

鼠标移动位置与弧度关系:

通过事件回调参数 我们可以获得 鼠标mousemove事件或者移动端touchmove事件的x,y坐标,可计算tan值为
tanφ = y/x;
再通过反三角函数有可得:
φ=arctan(tanφ)

以上基本的位置关系已经得出;

2、js实现中的几个问题

(1)坐标的转化方法

由于上述位置关系是基于中心坐标实现的,而canvas绘制坐标是以左上角为原点实现的,故需要实现两种坐标的转化关系;

(2)canvas弧度位置与正常弧度位置的转化

下图是canvas的弧度位置恰好与我们正常计算的方向是相反的,同样需考虑弧度的转换;

https://img4.sycdn.imooc.com/5ef8289a0001521f02720216.jpg

(3)Math.atan方法返回值与实际弧度的关系

https://img1.sycdn.imooc.com/5ef8289a0001bee901190323.jpg

由于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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
4
获赞与收藏
60

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消