canvas圆形可拖动进度条

3,401 阅读5分钟

使用方法

Using npm

npm i drag-arc -S

 import DragArc from 'drag-arc';

也可下载直接引入js

<script src= 'dist/drag-arc.min.js'>

调用

new DragArc({
    el: dom,
    value: 10,
    change: (v) => {
        console.log(v)
    },
    ...
})

一、示例效果:

codepen.io/pangyongshe…


var Draw={
   init:function(){
    this.obj=document.getElementById("canvas");    //获取canvas对象
    this.cObj=document.getElementById("canvas").getContext("2d");//获取canvas对象上下文环境
    this.event();   //初始化事件
    this.pathr=120; //滑动路径半径
    this.draw.prototype=this; //draw继承Draw方法
    this.p=new this.draw(112,284,18);  //创建实例p
  } 
  //... 
}
复制代码

3、在Draw中编写绘图方法draw绘制下图:

(1)创建绘图方法,获取参数

复制代码
draw:function(x,y,r,j){  //绘图
      this.cObj.clearRect(0,0,400,400);    //清空画布
      this.x=x;   //滑块坐标x
      this.y=y;   //滑块坐标y 
      this.r=r;    //滑块移动路径半径
      this.j=j;    //橙色圆弧结束弧度值
      //...
}
复制代码

(2)绘制内侧圆弧

this.cObj.beginPath();
this.cObj.lineWidth = 1;
this.cObj.arc(200,200,100,Math.PI*0.75,Math.PI*2.25,false); // 绘制内层圆弧
this.cObj.strokeStyle = '#0078b4';
this.cObj.stroke();

(3)绘制外侧圆弧

复制代码
this.cObj.beginPath();
this.cObj.arc(200,200,120,Math.PI*0.75,Math.PI*2.25,false); // 绘制外侧圆弧
this.cObj.strokeStyle = '#c0c0c0';
this.cObj.lineCap = "round";
this.cObj.lineWidth = 20;
this.cObj.stroke();
复制代码

(4)绘制滑块

  由于滑块是可以移动的这里滑块的位置使用了坐标参数xy,及滑块半径r作为可变参数

复制代码
this.cObj.beginPath();
this.cObj.moveTo(200,200);
this.cObj.arc(x,y,r,0,Math.PI*2,false); // 绘制滑块
this.cObj.fillStyle='#f15a4a';
this.cObj.fill();

this.cObj.beginPath();
this.cObj.moveTo(200,200);
this.cObj.arc(x,y,11,0,Math.PI*2,false); // 绘制滑块内侧白色区域
this.cObj.fillStyle='#ffffff';
this.cObj.fill();
复制代码

(5)绘制长度可变弧(橙色部分):

由于长度可变,这里把闭合弧度作为可变参数

复制代码
this.cObj.beginPath();
this.cObj.arc(200,200,120,Math.PI*0.75,this.j,false); // 可变圆弧
this.cObj.strokeStyle = '#f15a4a';
this.cObj.lineCap = "round";
this.cObj.lineWidth = 20;
this.cObj.stroke();
复制代码

至此绘图方法完成,调用drow方法并传入参数滑块坐标、半径和拖动弧度(x,y,r,j)即可完成图片的绘制。

4、绘图方法分析

(1)这里首先建立以canvas左上角为原点屏幕坐标系,后面的绘图都将基于该坐标系,坐标图像如下:

编写获取当前光标位置点相对canvas坐标系(lx,ly)的方法:即当前坐标点减去canvas偏移距离

复制代码
  getx:function(ev){  //获取鼠标在canvas内坐标x
    return ev.clientX-this.obj.getBoundingClientRect().left;
  },
  gety:function(ev){  //获取鼠标在canvas内坐标y
    return ev.clientY-this.obj.getBoundingClientRect().top;
  }
复制代码

(2)为方便构建圆的方程,这里建立一个以canvas中心为原点的坐标系,如下图,在实际使用draw方法绘图时使用的是黑色的坐标系,在使用圆的路径处理是我们使用红色的坐标系

下面添加坐标转化方法,

屏幕坐标(黑色坐标)->中心坐标(红色坐标)

复制代码
spotchange:function(a){ //屏幕坐标转化为中心坐标 
    var target={};
    if(a.x<200 && a.y<200){      //二象限
        target.x=-(200-a.x); 
        target.y=200-a.y; 
    }else if(a.x>200 && a.y<200){  //一象限  
        target.x=a.x-200; 
        target.y=200-a.y; 
    }else if(a.x>200 && a.y>200){  //四象限
        target.x=a.x-200;
        target.y=-(a.y-200) 
    }else if(a.x<200 && a.y>200){  //三象限
        target.x=-(200-a.x); 
        target.y=-(a.y-200); 
    } 
    return target; 
},
复制代码

中心坐标(红色坐标)->屏幕坐标(黑色坐标)

复制代码
respotchange:function(a){ //中心坐标转化为屏幕坐标
    var target={};
    if(a.x>0 && a.y>0){
      target.x=200+a.x;
      target.y=(200-a.y);
    }else if(a.x<0 && a.y>0){
      target.x=200+a.x;
      target.y=200-a.y;
    }else if(a.x<0 && a.y<0){
      target.x=200+a.x;
      target.y=-(a.y-200)
    }else if(a.x>0 && a.y<0){
      target.x=200+a.x;
      target.y=-(a.y-200);
    }
    return target;
  },
复制代码

(3)滑块路径及位置计算方法

  首先不考虑xy正负,

  计算光标位置点的正切值

  tanφ = ly/lx;

  可知φ

  φ=arctan(tanφ)

  根据圆的参数方程,可获得光标点对应蓝色路径位置坐标为

  x=rcosφ

  y=rsinφ

(4)根据上面思路编写获取坐标位置方法,这里添加了xy和弧度值正负处理方法和可拖动弧度范围

复制代码
  getmoveto:function(lx,ly){
      if(!this.p.isDown){    //是否可移动
        return false;
      }
      var tem={};    //存放目标坐标位置
      tem.o=Math.atan(ly/lx); //鼠标移动点圆形角
      tem.x=this.pathr*Math.cos(tem.o);
      tem.y=this.pathr*Math.sin(tem.o);
      if(lx<0){ //坐标点处理(正负)
        tem.x=-tem.x;
        tem.y=-tem.y;
      }
     if(lx>0){  //弧度值处理
      tem.z=-Math.atan(tem.y/tem.x)+Math.PI*2;
     }else{
      tem.z=-Math.atan(tem.y/tem.x)+Math.PI;
     }
     if(tem.z>7.06){  //最大值
      tem.z=7.06;
      tem.x=this.pathr*Math.cos(Math.PI*2.25);
      tem.y=-this.pathr*Math.sin(Math.PI*2.25);
     }
     if(tem.z<2.4){ //最小值
      tem.z=2.4;
      tem.x=this.pathr*Math.cos(Math.PI*0.75);
      tem.y=-this.pathr*Math.sin(Math.PI*0.75);
     }
    return tem;
   },
复制代码

(5)以上方法在canvas内任意点均可作为滑块拖动的目标点,这里编写cheack方法,将限制可拖动位置限制在一个大概的环形里

复制代码
check:function(x,y){  //限制可拖动范围
    var xx=x*x;
    var yy=y*y;
    var rr=114*114; //最小
    var rrr=126*126;  //最大
    if(xx+yy>rr && xx+yy<rrr){
      return true;
    }
    return false;
  },
复制代码

5、事件方法编写

(1)鼠标按下执行方法OnMouseDown

这里使用了getx和gety获取光标相对canvas坐标,并判断鼠标是否移动到了滑块上方位置内,(this.p是当前绘图对象,p.x即滑块横坐标,p.x即当前纵坐标,p.r即滑块最大半径),如果光标在滑块上方则设置isDown为TRUE,反正依然,后面我们会通过isDown来判断是否执行移动滑块的方法:

复制代码
OnMouseDown:function(evt){
    var X=this.getx(evt);    //获取当前鼠标位置横坐标
    var Y=this.gety(evt);     //获取当前鼠标位置纵坐标
    var minX=this.p.x-this.p.r;  
    var maxX=this.p.x+this.p.r;
    var minY=this.p.y-this.p.r;
    var maxY=this.p.y+this.p.r;
     if(minX<X && X<maxX && minY<Y && Y<maxY){   //判断鼠标是否在滑块上 
         this.p.isDown=true;      
     }else{
          this.p.isDown=false;
     }
}
复制代码

(2)鼠标按下后移动时滑块的方法:

复制代码
   OnMouseMove:function(evt){ //
       if(this.p.isDown){    //是否在滑块上按下鼠标
          var a={};         //存放当前鼠标坐标
          a.x=this.getx(evt);    //坐标转化
          a.y=this.gety(evt);
          var b=this.spotchange(a);    //坐标转化
          var co=this.getmoveto(b.x,b.y);    //获取要移动到的坐标点
          if(this.check(b.x,b.y)){    //判断移动目标点是否在可拖动范围
            var co=this.getmoveto(b.x,b.y);    //获取到移动的目标位置坐标()
            var tar=this.respotchange(co);    //坐标转化
            var o=co.z;
            this.p.draw(tar.x,tar.y,this.p.r,o);    //绘图
          }
       }
   },
复制代码

(3)鼠标释放方法

OnMouseUp:function(){  //鼠标释放
       this.p.isDown=false
},

(4)最后将所有方法和事件绑定

event:function(){  //事件绑定
       this.obj.addEventListener("mousedown",this.OnMouseDown.bind(this),false);
       this.obj.addEventListener("mousemove",this.OnMouseMove.bind(this),false);
       this.obj.addEventListener("mouseup",this.OnMouseUp.bind(this),false);
   },

至此可拖动滑块基本方法编写完成