Question

我有一个圆圈项目，点击后旋转到预定位置。它几乎就在那里，但最后一个要求是它总是顺时针旋转到标记。我似乎无法弄清楚如何获得正确的值，以便当我设置css transform：rotate（Xdeg）时，它将始终顺时针方向。保持0到360之间的角度对于另一部分来说也是一个加分，但不是必需的。

请参阅下面的小提琴，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

更新：弄清楚这很容易，我发现它比我想象的要困难一些。 jQuery.animate的另一个答案是有效的，但是animate没有css动画所做的流畅帧率（它在GPU上运行）。

这是一个改进的CSS解决方案小提琴： http://jsfiddle.net/2g17cjuL/2/

保持0到360之间的角度也是一个加号

你不能继续前进（即以正数旋转）并保持旋转为正，但是，在我的小提琴offsetDegrees（附加旋转的度数）或totalDegrees的其余部分中除以360应该可以为您提供在其他地方使用的内容。

Answer 2

开箱即用：
我们可CSS3 rotate transform元素，即： 720° ...
它将使2 顺时针转弯。 （好的，在我们的用户界面中，它最多只需要359转，但让我们按照数学运算）
如果我们将它设置为 810° ...它只是意味着它会顺时针移动90°！

所以我们需要做的就是总是将度数变量增加到精神错乱！

HEY！如果在某些时候你想跟踪当前标准化 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>

Answer 3

要求：它始终顺时针旋转。

一件事：如果您使用CSS过渡，它将为您计算最短路径。你想要更多地控制旋转方向，所以我在你的CSS中注释了transition:transform 1s ease;，因为我们会手动控制它。

<强> JAVASCRIPT

我借用了this JQuery function并对其进行了修改，因此我们可以为它提供一个起始角度和结束角度，并为我们设置#graph1动画。（阅读更改持续时间，缓和以及使用complete回调）的链接

$.fn.animateRotate = function(angle, start, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: start}).animate({deg: angle}, args);
  });
};

我还修改了你的JQuery，因此它不会逆时针旋转：当currentRotationDegrees大于degreesToZero时，它会减去360，然后使用这个新值作为起始位置`animateRotate（）。

if(currentRotationDegrees > degreesToZero){
    currentRotationDegrees -= 360;
}

$('#graph1').animateRotate(degreesToZero, currentRotationDegrees);

这是在行动。

http://jsfiddle.net/q4nad31t/1/

旋转元素以单击位置

3 个答案: