在圆圈路径上拖动画布元素
在圆圈路径上拖动画布元素
提问于 2013-02-22 05:55:34
我希望使用jQuery画布实现类似HTML5的Knob效果，但是使用圆圈旋钮/光标，而不是jQuery Knob所做的笔画光标效果。
基于jQuery Knob代码，我设法将onMouseMove事件与我的圆形旋钮/光标连接起来，这样圆圈旋钮就会根据鼠标所在位置的X和Y坐标移动。但是，我不能“限制”旋钮只在/沿着圆圈路径移动，就像this example那样，所以如果我在圆圈路径内单击/鼠标向下移动，圆圈旋钮就会移动到路径内。
是否有任何方法仅使用Canavas和jQuery来实现这一点，而不是像上面的示例那样的Raphael？
我的想法之一是，每当mousemove事件发生在路径外(如this)时，将圆环旋钮移回轨道(在路径上)。然而，这方面的计算没有成功。我能用什么数学/几何公式来达到这个目的吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-02-22 08:06:13
只要一点点三角就能回答你的问题！
这段代码将找到与mouseclick最近的圆上的点。
var rads = Math.atan2(mouseY - knobCenterY, mouseX - knobCenterX);
var indicatorX=knobRadius*Math.cos(rads)+knobCenterX;
var indicatorY=knobRadius*Math.sin(rads)+knobCenterY;此代码将在最接近用户单击位置的旋钮上放置一个指示器。
这里是一个Fiddle -- 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15017791
复制相关文章
相似问题
腾讯云开发者
