jquery-旋转光标角度答案

【问题标题】：Jquery-rotate cursor anglejquery-旋转光标角度
【发布时间】：2012-03-10 16:36:15
【问题描述】：

我需要使用 Jquery-rotate 旋转箭头，但我不知道光标的角度 :( 我尝试计算它，但脚本不起作用。

我想要这样的结果http://www.lonhosford.com/content/html5/canvas/rotate_to_mouse.html

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function(){
        function diff(x, y) {
            var a = (x * Math.PI / 180) - Math.PI;
            var b = (y * Math.PI / 180) - Math.PI;
            return Math.atan2(Math.sin(b - a), Math.cos(b - a)) * (180 / Math.PI);
        }
        $('body').mousemove(function(e){
            var x = e.pageX;
            var y = e.pageY;
            var myAngle = diff(x, y);
            $("#image").rotate(myAngle);
        });         
    });
//]]>
</script>

【问题讨论】：

你需要有一个中心点，围绕它计算角度。那个点是什么？
它是点 - 屏幕中心的图像（像这样的箭头lonhosford.com/content/html5/canvas/rotate_to_mouse.html）

标签： javascript jquery cursor angle jquery-rotate

【解决方案1】：

如果您查看您发布的示例的源代码，您会发现

update: function()
    {
        // Distance from mouse x and center of canvas.
        this._dx = mouse.x - this.centerX; 
        // Distance from mouse y and center of canvas.
        this._dy = mouse.y - this.centerY; 
        // Radians for the canvas rotate method.
        this._radians = Math.atan2(this._dy,this._dx);
    }

要根据您自己的需要调整此代码，请尝试

function diff(x, y) {
    var centerItem = $('imageid'),
        centerLoc = centeItem.offset();
    var dx = x - centerLoc.left + (centerItem.width() / 2);
        dy = y - centerLoc.top + (centerItem.height() / 2);
    return Math.atan2(dy, dx) * (180 / Math.PI);
}

http://jsfiddle.net/gaby/xWtKc/1/ 的示例

【讨论】：