Question

我正在尝试计算圆的旋转角度，我使用以下脚本：

        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
                };
            }
        });

我不认为它是准确的，我在圆圈内添加了一个形状以查看旋转，但无法将它们组合在一起，我将非常感谢您对如何计算旋转度以及如何将形状分组的建议这个圆圈同时旋转。完整的项目脚本位于http://jsfiddle.net/user373721/Ja6GB。提前谢谢。

Answer 1

以下是从“12点”开始计算鼠标位置角度的方法

假装你的画布是以画布为中心的时钟。

这里是如何计算当前鼠标位置的角度，假设12点是零度。

    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);
    }

这是完整的代码和小提琴：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>

Kinetic JS - 计算圆的旋转度

1 个答案: