使用Jquery的圆形滑块

Question

如何将鼠标滑动到圆形？在画布中绘制圆弧和鼠标指针.鼠标应该在圆形路径上拖拽山墙？

//function to create mouse event to drag the mouse hover the arc

function mousedrag() {
    var canvasoffset = $(this.canvas).offset();
    var offsetX = canvasoffset.left;
    var offsetY = canvasoffset.top;     
    var mouseX = parseInt(e.offsetX || e.clientX - offsetX);
    var mouseY = parseInt(e.offsetY || e.clientY - offsetY);

    var radius = this.width / 2;
    var twoPI = 2 * Math.PI;
    var toRad =  twoPI / 360;
    var r_width =  this.width * 0.8;

    var radial_Angle = Math.atan2(mouseY - radius,mouseX - radius);

    var p_side_x =  radius + r_width * Math.cos(radial_Angle);        
    var p_side_y =  radius + r_width * Math.sin(radial_Angle);
    var p_mouse_x =  radius + ((r_width+10) * Math.sin(radial_Angle));
    var p_mouse_y =  radius + ((r_width+ 10) * Math.sin(radial_Angle));

    var imgData = this.ctx.getImageData(p_side_x, p_side_y, 1, 1).data;
    var selectedColor = new Color(imgData[0], imgData[1], imgData[2]);
            clearDraw();
    renderSpectrum();
    renderMouse(p_side_x, p_side_y, p_mouse_x, p_mouse_y);          
}

鼠标手柄无法正常滑动.

Answer 1

实际上,您无法强制将鼠标约束为圆形.

但是您可以计算相对于中心点的鼠标位置.

// define a centerpoint

var cx=150;  
var cy=150;
var angleVersusCenter=0;

// listen for mouse moves 

function handleMouseMove(e){

  // get the mouse position

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // set the current radian angle of the mouse
  // versus the centerpoint

  var angleVersusCenter = Math.atan2( mouseY-cy, mouseX-cx );
}

演示:http: //jsfiddle.net/m1erickson/z6cQB/