1

I am trying to calculate the angle of rotation of a circle, I am using the following script:

        var circle = new Kinetic.Circle({
            x: 256,
            y: 256,
            radius: 140,
            stroke: 'black',
            strokeWidth: 4 ,
            offset: [0, 0],
            draggable: true,
            dragBoundFunc: function (pos) {
                var pos = stage.getMousePosition();
                var xd = 140 - pos.x;
                var yd = 140 - pos.y;
                var theta = Math.atan2(yd, xd);
                var degree = (theta / (Math.PI / 180) - 45);
                this.setRotationDeg(degree);
                return {
                    x: this.getAbsolutePosition().x,
                    y: this.getAbsolutePosition().y
                };
            }
        });

I don't think it is accurate, I added a shape inside the circle to see the rotation but could not group them together, I would appreciate your suggestions on how to calculate the degree of rotation and how to group the shape with the circle so the rotate at the same time. The complete project script is at http://jsfiddle.net/user373721/Ja6GB. Thanks in advance.

4

1 回答 1

1

Here is how you calculate the angle of the mouse position from "12 o'clock"

Pretend your canvas is a clock centered in the canvas.

Here's how to calculate the angle of the current mouse position assuming 12 o'clock is zero degrees.

    function degreesFromTwelveOclock(cx,cy,mouseX,mouseY){
        // calculate the angle(theta)
        var theta=Math.atan2(mouseY-centerY,mouseX-centerX);
        // be sure theta is positive
        if(theta<0){theta += 2*Math.PI};
        // convert to degrees and rotate so 0 degrees = 12 o'clock
        var degrees=(theta*180/Math.PI+90)%360;
        return(degrees);
    }

Here is complete code and a Fiddle: http://jsfiddle.net/m1erickson/HKq77/ 

<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 centerX=canvas.width/2;
    var centerY=canvas.height/2;
    var radius=10;

    // draw a center dot for user's reference
    ctx.beginPath();
    ctx.arc(centerX,centerY, radius, 0 , 2 * Math.PI, false);
    ctx.fill();

    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#movelog").html("Mouse: "+ mouseX + " / " + mouseY);
      $("#angle").html("Angle: "+parseInt(degreesFromTwelveOclock(centerX,centerY,mouseX,mouseY)));
    }

    function degreesFromTwelveOclock(cx,cy,mouseX,mouseY){
        // calculate the angle(theta)
        var theta=Math.atan2(mouseY-centerY,mouseX-centerX);
        // be sure theta is positive
        if(theta<0){theta += 2*Math.PI};
        // convert to degrees and rotate so 0 degrees = 12 o'clock
        var degrees=(theta*180/Math.PI+90)%360;
        return(degrees);
    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});

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

</head>

<body>
    <p id="movelog">Move</p>
    <p id="angle">Out</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-03-31T05:15:42.033 回答