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

Question

我想使用HTML5 Canvas实现类似jQuery Knob的效果，但要使用圆形旋钮/光标，而不是jQuery Knob的笔触光标效果。

基于jQuery Knob代码，我设法将onMouseMove事件与我的圆形旋钮/光标连接起来，以便圆形旋钮根据鼠标所在位置的X和Y坐标移动。 但是，我不能像本例一样“限制”旋钮仅在圆形路径上/沿着圆形路径移动，因此，如果我在圆形路径内单击/鼠标向下移动，圆形旋钮将移动到路径内部。

有什么方法只能使用Canavas和jQuery来实现此目的，而不是像上面的示例那样通过Raphael实现吗？

我的一个想法是移动圆钮回到正轨（路径上），只要鼠标移动事件的路径（如外发生这样）。 但是，要成功地进行此计算，没有运气。 我可以使用任何数学/几何公式来实现这一目标吗？

Answer 1

只需一点三角即可回答您的问题！

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

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>

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

问题描述

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