使用 Jquery 的圆形滑块答案

【问题标题】：Circular Slider using Jquery使用 Jquery 的圆形滑块
【发布时间】：2014-03-06 13:47:08
【问题描述】：

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

//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);          
}

鼠标手柄不能正常滑动。

【问题讨论】：

不在圆圈处绘制鼠标句柄。显示在对角线

标签： html5-canvas jquery-slider

【解决方案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/

【讨论】：

我尝试了代码但无法正常工作（jsfiddle）。我在html5 中看到了限制垂直或水平拖动的示例。需要帮助来创建句柄鼠标事件。感谢以上信息。这是非常有用的建议
是否可以有画布层。这样我就可以避免重绘背景
是的，你可以做图层，这样背景就不会受到干扰。您能否更详细地描述您需要什么-似乎我不完全理解您想要什么:(
我正在尝试创建一个颜色选择器
我对你需要什么感到困惑 :-( 如果你想要一个颜色选择器，你可以绘制一个色轮的图像，然后在鼠标下获取像素颜色？

【解决方案2】：

这是满足您要求的 jQuery roundSlider 插件，请在此处查看 http://roundsliderui.com/。这可能会对您有所帮助。

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

更多详情请查看demos 和documentation 页面。

请查看jsFiddle的演示。

现场演示：

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

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

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

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

不同外观的截图：

从here查看更多关于不同主题的详细信息。

【讨论】：