使用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/

Answer 2

以下是符合您要求的jQuery roundSlider插件，请点击此处http://roundsliderui.com/。这可能会对你有所帮助。

这个滑翔机有类似jQuery ui滑块的选项。它支持默认，最小范围和范围滑块类型。它不仅支持圆形滑块，还支持各种circle shapes，例如四分之一，一半和饼形圆形。

有关详细信息，请查看demos和documentation页。

请从jsFiddle查看演示。

现场演示：

＆＃13;

＆＃13;

$("#slider").roundSlider({
    width: 10,
    handleSize: "+8",
    value: "40"
});

$("#half-slider").roundSlider({
    width: 10,
    circleShape: "half-top",
    handleSize: "+8",
    value: "80"
});

＆＃13;

.rs-control {
    display: inline-block;
    float: left;
    margin-left: 30px;
}
.rs-control .rs-path-color {
    background-color: #e9e9e9;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css" rel="stylesheet"/>

<div id="slider" class="rslider"></div>

<div id="half-slider" class="rslider"></div>

＆＃13;

＆＃13;

＆＃13;

具有不同外观的屏幕截图：

从here查看有关不同主题的更多详情。