将画布元素拖动到圆形路径上

Question

I would like to achieve jQuery Knob-like effect using HTML5 Canvas, but with a circle knob/cursor, instead of the stroke cursor effect that jQuery Knob does. 我想使用HTML5 Canvas实现类似jQuery Knob的效果，但要使用圆形旋钮/光标，而不是jQuery Knob的笔触光标效果。

Based on jQuery Knob code, I was managed to connect the onMouseMove event with my circle knob/cursor so the circle knob moves according to the X and Y coordinates of where the mouse is. 基于jQuery Knob代码，我设法将onMouseMove事件与我的圆形旋钮/光标连接起来，以便圆形旋钮根据鼠标所在位置的X和Y坐标移动。 However I cannot "restrict" the knob to move only on/along the circle path just like this example , so if I click/mousedown inside the circle path, the circle knob moves to inside the path. 但是，我不能像本例一样“限制”旋钮仅在圆形路径上/沿着圆形路径移动，因此，如果我在圆形路径内单击/鼠标向下移动，圆形旋钮将移动到路径内部。

Is there any way to achieve this only using Canavas and jQuery, not Raphael like the example above? 有什么方法只能使用Canavas和jQuery来实现此目的，而不是像上面的示例那样通过Raphael实现吗？

One of my thoughts was to move the circle knob back on track (on the path) whenever mousemove event occurs outside the path (like this ). 我的一个想法是移动圆钮回到正轨（路径上），只要鼠标移动事件的路径（如外发生这样）。 However no luck in succeeding the calculation for this. 但是，要成功地进行此计算，没有运气。 Is there any math/geometry formula I can use to achieve this? 我可以使用任何数学/几何公式来实现这一目标吗？

Answer 1

Just a little bit of trigonometry will answer your question! 只需一点三角即可回答您的问题！

This code will find the point on a circle closest to a mouseclick. 此代码将在最接近鼠标单击的圆上找到该点。

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

This code will put an indicator on the knob closest to where the user clicks 该代码将在旋钮上最靠近用户单击的位置放置一个指示器

And here is a Fiddle --- http://jsfiddle.net/m1erickson/pL5jP/ 这是一个小提琴--- 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>

将画布元素拖动到圆形路径上

问题描述

1 个解决方案

解决方案1
5 已采纳 2013-02-22 08:06:13

将画布元素拖动到圆形路径上

问题描述

1 个解决方案

解决方案1 5 已采纳 2013-02-22 08:06:13

解决方案1
5 已采纳 2013-02-22 08:06:13