Javascript Circle slider 度数到时间

Question

我正在看这个 slider http://jsfiddle.net/sCanr/1/ 。

(function () {
    var $container = $('#container');
    var $slider = $('#slider');
    var sliderW2 = $slider.width()/2;
    var sliderH2 = $slider.height()/2;    
    var radius = 200;
    var deg = 0;    
    var elP = $('#container').offset();
    var elPos = { x: elP.left, y: elP.top};
    var X = 0, Y = 0;
    var mdown = false;
    $('#container')
    .mousedown(function (e) { mdown = true; })
    .mouseup(function (e) { mdown = false; })
    .mousemove(function (e) {
        if (mdown) {
           var mPos = {x: e.clientX-elPos.x, y: e.clientY-elPos.y};
           var atan = Math.atan2(mPos.x-radius, mPos.y-radius);
           deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position 

           X = Math.round(radius* Math.sin(deg*Math.PI/180));    
           Y = Math.round(radius*  -Math.cos(deg*Math.PI/180));
           $slider.css({ left: X+radius-sliderW2, top: Y+radius-sliderH2 });              
           // AND FINALLY apply exact degrees to ball rotation
           $slider.css({ WebkitTransform: 'rotate(' + deg + 'deg)'});
           $slider.css({ '-moz-transform': 'rotate(' + deg + 'deg)'});
           //
           // PRINT DEGREES               
           $('#test').html('angle deg= '+deg); 
        }
    });

})();

我想做的就是将其变成 html5 视频的时间线控件。然而，我在计算这背后的数学时遇到了一些麻烦。

Answer 1

试试这个:

http://jsfiddle.net/phdphil/Zv4K7/#base

它的工作原理是保留当前位置和最后 Angular 全局变量(您应该更改此设置以构造具有自己状态的特定表盘)。然后，每次移动计算增量(模 360，这需要适当的模函数)，并假设 < 180 度的移动是向前移动，> 180 度(记住 -1 模 360 是 359)是负移动。然后更新累积总位置:

var current = 0;
var lastAngle = 0;

           // ... inside the handler
           var delta = 0;
           var dir = 0;
           var rawDelta = mod(deg-lastAngle,360.0);
           if(rawDelta < 180) {
              dir = 1;
              delta = rawDelta;
           } else {
              dir = -1;
              delta = rawDelta-360.0;
           }
           current += delta;
           lastAngle = deg;
           $('#test').html('angle deg= '+current);  // current instead of deg

为了清楚起见，dir 变量保存此移动的方向，可用于更新屏幕上的 >> 或 << 指示器。

实模函数，取自 this SO answer :

function mod(x,n) {
   return ((x%n)+n)%n;
}