在圆形路径上拖动一个画布元素

我想使用HTML5画布实现类似jQuery旋钮的效果，但是使用圆形旋钮/光标而不是jQuery旋钮所具有的笔画光标效果。在圆形路径上拖动一个画布元素

基于jQuery Knob代码，我设法将onMouseMove事件与我的圆形旋钮/光标连接，以便圆形旋钮根据鼠标所在的X和Y坐标移动。不过，我不能“限制”旋钮只沿着圆弧路径移动，就像this example一样，所以如果在圆弧路径内点击/ ousedown，圆形旋钮移动到路径内部。

有没有什么办法可以实现这个只能使用Canavas和jQuery，而不是Raphael像上面的例子？

我的一个想法是，当鼠标移动事件发生在路径之外时（如路径this），将圆形旋钮移回轨道上（路径上）。然而，没有运气成功的计算。有什么数学/几何公式可以用来实现这个吗？

来源

2013-02-22 hotate17

只要一点点三角就能回答你的问题！

此代码将找到最接近鼠标点的圆上的点。

var rads = Math.atan2(mouseY - knobCenterY, mouseX - knobCenterX); 
var indicatorX=knobRadius*Math.cos(rads)+knobCenterX; 
var indicatorY=knobRadius*Math.sin(rads)+knobCenterY;

在用户点击

这里是一个小提琴这段代码放在一个指标上的旋钮最接近--- http://jsfiddle.net/m1erickson/pL5jP/

<!doctype html> 
    <html> 
    <head> 
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]--> 

    <style> 
     body{ background-color: ivory; } 
     canvas{border:1px solid red;} 
    </style> 

    <script> 
    $(function(){ 

     var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 
     var canvasOffset=$("#canvas").offset(); 
     var offsetX=canvasOffset.left; 
     var offsetY=canvasOffset.top; 
     var circleArc=Math.PI*2; 

     // drawing design properties 
     var knobCenterX=100; 
     var knobCenterY=100; 
     var knobRadius=50; 
     var knobColor="green"; 
     var indicatorRadius=5; 
     var indicatorColor="yellow"; 

     Draw(canvas.width/2,1); // just to get started 

     function Draw(mouseX,mouseY){ 
      // given mousePosition, what is the nearest point on the knob 
      var rads = Math.atan2(mouseY - knobCenterY, mouseX - knobCenterX); 
      var indicatorX=knobRadius*Math.cos(rads)+knobCenterX; 
      var indicatorY=knobRadius*Math.sin(rads)+knobCenterY; 
      // start drawing 
      ctx.clearRect(0,0,canvas.width,canvas.height); 
      // draw knob 
      ctx.beginPath(); 
      ctx.arc(knobCenterX,knobCenterY,knobRadius,0,circleArc,false); 
      ctx.fillStyle="ivory"; 
      ctx.fill(); 
      ctx.lineWidth=2; 
      ctx.strokeStyle=knobColor; 
      ctx.stroke(); 
      // draw indicator 
      ctx.beginPath(); 
      ctx.arc(indicatorX, indicatorY, indicatorRadius, 0, circleArc, false); 
      ctx.fillStyle = indicatorColor; 
      ctx.fill(); 
      ctx.lineWidth = 2; 
      ctx.strokeStyle = 'black'; 
      ctx.stroke(); 
     } 

     function handleMouseDown(e){ 
      MouseX=parseInt(e.clientX-offsetX); 
      MouseY=parseInt(e.clientY-offsetY); 
      Draw(MouseX,MouseY); 
     } 

     $("#canvas").mousedown(function(e){handleMouseDown(e);}); 

    }); // end $(function(){}); 
    </script> 

    </head> 

    <body> 

     <br/><p>Click anywhere in the canvas to set the knob indicator</p><br/> 
     <canvas id="canvas" width=200 height=200></canvas> 

    </body> 
    </html>

来源

2013-02-22 08:06:13 markE

非常感谢您的回答坊间！它完美，完全按照我想要的方式工作。 – hotate17 2013-02-24 18:09:51

我其实还有一个后续问题：我也想将这个指标与jQuery Knob中圈子中心显示的值联系起来。我已经找到了角度函数（this.angle（v）），它根据值/值的变化将其默认光标移动到正确的角度，所以我继续做下面的事情：A = this.angle（value）;如果（值改变）{rads = A}，但似乎是A的计算是不正确的。你能告诉我如何根据价值得到正确的角度吗？预先感谢一堆！ – hotate17 2013-02-24 23:01:52

所以一个圆是2 * Math.PI弧度= 2 * 3.14159 = 6.283185弧度。因此，您可以知道您已导航的圆的百分比，如下所示：#radiansCompleted/6.28315 * 100.例如，如果您导航了圆弧的2弧度，则围绕圆圈的弧度为2/6.28315 * 100 = 31.83％。 – markE 2013-02-25 00:21:05

在圆形路径上拖动一个画布元素

回答

相关问题