如何使对象通过拖动旋转，如何使用sin或cos获得围绕原点的旋转点？

我已经搜索了很长时间，但找不到更好的方法来解决我的问题，
使 div 可通过每个手柄拖动、旋转和调整大小，如这 2 个示例1 http://vremenno.net/examples/jquery-ui-rotation/ 2 http://fabricjs.com/kitchensink/,现在可以拖动了，但是可以旋转..

关于普拉桑斯·K·C https://stackoverflow.com/a/10330295/1775888, Chango https://stackoverflow.com/a/11067482/1775888, Yi Jiang https://stackoverflow.com/a/3438798/1775888..的回答，这些代码可能不正确，
1.它应该有一个绕原点的旋转点。
2.需要考虑半径。
但我不知道这里如何使用sin或cos使旋转考虑半径？
任何建议将不胜感激。http://jsfiddle.net/tBgLh/8/ http://jsfiddle.net/tBgLh/8/

var dragging = false, target_wp;   
$('.handle').mousedown(function(e) {
    var o_x = e.pageX, o_y = e.pageY; // origin point
    e.preventDefault();
    e.stopPropagation();
    dragging = true;
    target_wp=$(e.target).closest('.draggable_wp');

    $(document).mousemove(function(e) {
        if (dragging) {
            var s_x = e.pageX, s_y = e.pageY; // start rotate point
            if(s_x !== o_x && s_y !== o_y){ //start rotate
                var s_rad = Math.atan2(s_y, s_x);
                var degree = (s_rad * (360 / (2 * Math.PI)));
                target_wp.css('-moz-transform', 'rotate(' + degree + 'deg)');
                target_wp.css('-moz-transform-origin', '50% 50%');
                target_wp.css('-webkit-transform', 'rotate(' + degree + 'deg)');
                target_wp.css('-webkit-transform-origin', '50% 50%');
                target_wp.css('-o-transform', 'rotate(' + degree + 'deg)');
                target_wp.css('-o-transform-origin', '50% 50%');
                target_wp.css('-ms-transform', 'rotate(' + degree + 'deg)');
                target_wp.css('-ms-transform-origin', '50% 50%');
            }
        }
    })
    $(document).mouseup(function() {
        dragging = false
    })
})// end mousemove

html

<div class="draggable_wp">
    <div class="el"></div>
    <div class="handle"></div>
</div>

您的方法有两个问题：

1. 原点不应该是用户单击的位置（即手柄），而是 div 中的固定点：

   target_wp=$(e.target).closest('.draggable_wp');
   //var o_x = e.pageX, o_y = e.pageY; // origin point
   var o_x = target_wp.offset().left,
       o_y = target_wp.offset().top; // origin point
   

   You will也可以使用单击的点，但用于其他用途（稍后详细介绍）：

   var h_x = e.pageX, h_y = e.pageY; // clicked point
   

   最后，原点应该是固定的（即在旋转之间不应改变）。这样做的一种方法是将其保留为data属性（不过还有其他选项）：

   if ( !target_wp.data("origin") )
       target_wp.data("origin", { left:target_wp.offset().left,
                                  top:target_wp.offset().top    });
   var o_x = target_wp.data("origin").left, 
       o_y = target_wp.data("origin").top; // origin point
   

   Update:CSS 属性是起源的一个很好的候选者transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin，如果存在 - 应确保鼠标尽可能紧密地跟随手柄。然而，这是一个实验性功能，因此实际结果可能会有所不同。附：我不确定将其设置为50% 50%是个好主意，因为转换本身可能会改变元素的宽度和高度、顶部和左侧。

2. 为了找到角度，你不应该调用atan2仅在鼠标点上，因为它只会计算该点与页面左上角之间的角度。您需要该点与原点之间的角度：

   var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin
   

   那会引导你halfway http://jsfiddle.net/mgibsonbr/tBgLh/9/，但它的行为仍然会很奇怪（它将围绕元素原点旋转，但不会像您期望的那样跟随手柄）。为了使其跟随手柄，您应该调整相对于单击点的角度 - 这将作为旋转量的基础：

   s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin
   

   之后你就得到了旋转working http://jsfiddle.net/mgibsonbr/tBgLh/10/（至少对于一次用户迭代）。

您会注意到手柄没有精确地跟随鼠标，原因是原点的选择 - 默认为元素的上/左上角。将其调整到元素内部的某个位置（也许使用data-属性）并且它应该按预期工作。

但是，如果用户多次与句柄交互，仅仅这样是不够的set旋转角度，你必须update无论上次迭代期间是什么。所以我添加一个last_anglevar 将在第一次单击时设置，然后在拖动过程中添加到最终角度：

// on mousedown
last_angle = target_wp.data("last_angle") || 0;

// on mousemove
s_rad += last_angle; // relative to the last one

// on mouseup    
target_wp.data("last_angle", s_rad);

这是决赛工作示例 http://jsfiddle.net/mgibsonbr/tBgLh/11/。 （注意：我修复了鼠标处理程序的嵌套，因此每次单击后它们不会再次添加）

$(function () {
    var dragging = false,
        target_wp,
        o_x, o_y, h_x, h_y, last_angle;
    $('.handle').mousedown(function (e) {
        h_x = e.pageX;
        h_y = e.pageY; // clicked point
        e.preventDefault();
        e.stopPropagation();
        dragging = true;
        target_wp = $(e.target).closest('.draggable_wp');
        if (!target_wp.data("origin")) target_wp.data("origin", {
            left: target_wp.offset().left,
            top: target_wp.offset().top
        });
        o_x = target_wp.data("origin").left;
        o_y = target_wp.data("origin").top; // origin point
        
        last_angle = target_wp.data("last_angle") || 0;
    })

    $(document).mousemove(function (e) {
        if (dragging) {
            var s_x = e.pageX,
                s_y = e.pageY; // start rotate point
            if (s_x !== o_x && s_y !== o_y) { //start rotate
                var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin
                s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin
                s_rad += last_angle; // relative to the last one
                var degree = (s_rad * (360 / (2 * Math.PI)));
                target_wp.css('-moz-transform', 'rotate(' + degree + 'deg)');
                target_wp.css('-moz-transform-origin', '50% 50%');
                target_wp.css('-webkit-transform', 'rotate(' + degree + 'deg)');
                target_wp.css('-webkit-transform-origin', '50% 50%');
                target_wp.css('-o-transform', 'rotate(' + degree + 'deg)');
                target_wp.css('-o-transform-origin', '50% 50%');
                target_wp.css('-ms-transform', 'rotate(' + degree + 'deg)');
                target_wp.css('-ms-transform-origin', '50% 50%');
            }
        }
    }) // end mousemove
    
    $(document).mouseup(function (e) {
        dragging = false
        var s_x = e.pageX,
            s_y = e.pageY;
        
        // Saves the last angle for future iterations
        var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin
        s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin
        s_rad += last_angle;
        target_wp.data("last_angle", s_rad);
    })
})

.draggable_wp {
    position: absolute;
    left: 150px;
    top: 150px;
}
.el {
    width: 25px;
    height: 50px;
    background-color: yellow;
}
.handle {
    position: absolute;
    left:0;
    top:-75;
    width: 25px;
    height: 25px;
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="draggable_wp">
    <div class="el"></div>
    <div class="handle"></div>
</div>