javascript - 旋转元素到点击位置

Question

我有一个带有圆圈的元素，单击该圆圈时，它会旋转到预定义的位置。它几乎就在那里，但最后的要求是它始终顺时针旋转到标记。我似乎无法弄清楚如何获得正确的值，以便当我设置 css transform:rotate(Xdeg) 时，它总是顺时针旋转。将 Angular 保持在 0 到 360 之间也会对另一部分有利，但不是必需的。

请参阅此 fiddle ，下面还有 javascript Rotation

$(function () {
$('body').on('click', '#graph1', function (e) {

    console.log('********************');
    //get mouse position relative to div and center of div for polar origin
    var pos = getMousePosAndCenter(e, 'graph1');

    //get the current degrees of rotation from the css
    var currentRotationDegrees = getCSSRotation('#graph1');
    console.log('CSS Rotation Value: ' + currentRotationDegrees);

    //current rotation in radians
    var currentRotationRadians = radians(currentRotationDegrees);

    //radians where clicked
    var clickRadiansFromZero = Math.atan2(pos.y - pos.originY, pos.x - pos.originX);

    //degrees the click is offset from 0 origin
    var offsetDegrees = degrees(clickRadiansFromZero);

    //how many degrees to rotate in css to put the mouse click at 0
    var degreesToZero;
    if (offsetDegrees >= 0)
        degreesToZero = currentRotationDegrees - Math.abs(offsetDegrees);
    else
        degreesToZero = currentRotationDegrees + Math.abs(offsetDegrees);

    console.log("Degrees to Zero: " + degreesToZero);

    //distance in pixels from origin
    var distance = calculateDistance(pos.originX, pos.originY, pos.x, pos.y);

    console.log("Distance From Origin(px): " + distance);

    $('#graph1').css('transform','rotate(' + degreesToZero + 'deg)')
});

});

function getMousePosAndCenter(e, id) {
    var rect = document.getElementById(id).getBoundingClientRect();
    return {
        x: (((e.clientX - rect.left) / rect.width) * rect.width) + 0.5 << 0,
        y: (((e.clientY - rect.top) / rect.height) * rect.height) + 0.5 << 0,
        originY: (rect.height / 2),
        originX: (rect.width / 2)
    };
}

function radians(degrees) {
    return degrees * Math.PI / 180;
};

function degrees(radians) {
    return radians * 180 / Math.PI;
};

function calculateDistance(originX, originY, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - originX, 2) + Math.pow(mouseY - originY, 2)));
}

function getCSSRotation(id) {
    var matrix = $(id).css('transform');
    var values = matrix.split('(')[1],
    values = values.split(')')[0],
    values = values.split(',');

    var a = values[0];
    var b = values[1];
    var c = values[2];
    var d = values[3];

    var cssRotation = degrees(Math.atan2(b, a));
    return cssRotation;
}

Answer 1

跳出框框思考:
我们可以通过 CSS3 旋转 transform 的元素，即:720° ...
它将顺时针 转动 2 圈。 (好的，在我们的UI 中它最多只能转 359 圈，但让我们按照数学计算)
如果我们将其设置为810°...这意味着它将顺时针移动 90°!

所以我们需要做的就是总是增加一个度变量到精神错乱!

嘿!如果在某个时候您想跟踪当前的标准化 0-360 度...
您始终可以通过 ourCurrentInsanelyHighDegree % 360 = UIdegrees

检索该值

Here's a jsBin demo

这就是您需要的所有 JS。

function getCSSRotation( $el ) {
  var matrix = $el.css('transform'),
      v = matrix.split('(')[1].split(')')[0].split(','),
      rds = Math.atan2(v[1], v[0]);
  return rds*180/Math.PI <<0; // Degrees
}

var $EL = $("#graph1"),
  w = $EL.width(),
  r = w/2,                             // Radius
  x = parseInt($EL.css("left"), 10),
  y = parseInt($EL.css("top"),  10),
  d = getCSSRotation( $EL );           // Initial degree (ONLY ONCE!)

$EL.on("click", function(e){
  var mx = e.clientX-x-r,              // Click coord X
      my = e.clientY-y-r,              // Click coord Y
      rds = Math.atan2(-my, -mx),      // Radians
      md = (rds*180/Math.PI<<0) + 180; // Mouse Degrees
  d += (360-md);                       // always increment to insanity!!
  $(this).css({transform:"rotate("+ d +"deg)"});
});

#graph1 {
    position:absolute;
    top:10px;    left:30px;
    width:200px; height:200px;
    background:url(//placehold.it/200x200&text=IMAGE);
    transition:transform 2s ease;
    transform:rotate(30deg);
    transform-origin:50% 50%;
    border-radius:50%;
}
#marker {
    position: absolute;
    top:110px;
    left:230px;
    border-top:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graph1"></div>
<div id="marker">Wherever you click, it rotates to here</div>