使用纯javascript旋转对象

Question

我尝试在鼠标移动时围绕中心旋转对象，一切都很完美，但是当我第一次点击此对象旋转它时，位置会发生变化。

＆＃13;

＆＃13;

    var el, offsetTop, offsetLft, offsetWdt,offsetHit , mouseDown;

    el = document.getElementById('switcher');
    var offset = getOffset( el );

    offsetTop = offset.top;
    offsetLft = offset.left;
    offsetWdt = el.offsetWidth;
    offsetHit = el.offsetHeight;
    mouseDown = false;

    function mouse(evt) {
      var center_x, center_y, mouse_x, mouse_y, radians, degree;
      evt.preventDefault();

      if (mouseDown == true) {
        center_x = (offsetLft) + (offsetWdt / 2);
        center_y = (offsetTop) + (offsetHit / 2);

        mouse_x = evt.pageX;
        mouse_y = evt.pageY;



        radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        degree = (radians * (180 / Math.PI) * -1) + 90;

        el.style.webkitTransform = 'rotate(' + degree + 'deg)';
        el.style.MozTransform = 'rotate(' + degree + 'deg)';
        el.style.msTransform = 'rotate(' + degree + 'deg)';
        el.style.OTransform = 'rotate(' + degree + 'deg)';
        el.style.transform = 'rotate(' + degree + 'deg)';
      }
    }

    el.addEventListener("mousedown", function () {
      mouseDown = true;
      el.addEventListener("mousemove", mouse, false);
    }, false);

   

    el.addEventListener("mouseup", function () {
      mouseDown = false;
    })
  

  function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
      _x += el.offsetLeft - el.scrollLeft;
      _y += el.offsetTop - el.scrollTop;
      el = el.offsetParent;
    }
    return { top: _y, left: _x };
  }

＆＃13;

.content {
      width: 900px;
      margin: 0 auto;
      border: 1px solid #DA574A;
    }

    .container {
      position: relative;
      width: 25em;
      height: 25em;
      padding: 2.8em;
      background-color: #ccc;
      margin: 0 auto;
    }

    .circle-24, .circle-12, .center, #switcher {
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      position: absolute;
      border-radius: 50%;
    }

    .circle-24 {
      width: 20em;
      height: 20em;
      z-index: 2;
      background-color: #fff;
    }

    .circle-12 {
      width: 15em;
      height: 15em;
      z-index: 3;
      background-color: #ff0;
    }

    .center {
      width: 0.5em;
      height: 0.5em;
      z-index: 5;
      background-color: red;
    }

    #switcher {
      height: 300px;
      width: 300px;
      z-index: 4;
      background-color: #d6dceb;
    }

    .rotator {
      position: absolute;
      width: 150px;
      height: 2px;
      left: 150px;
      top: 150px;
    }

    .rotator .hand {
      position: absolute;
      cursor: pointer;
      width: 110px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 40, 160, 0.12);
      transition: .4s;
    }

    .rotator .pointer {
      position: absolute;
      content: "";
      height: 40px;
      width: 40px;
      right: 0px;
      bottom: -20px;
      border-radius: 40px;
      background-color: rgba(0, 40, 160, 0.12);
    }

    .circle-12 div, .circle-24 div {
      width: 2em;
      height: 2em;
      background-color: #DA574A;
    }

＆＃13;

<div class="content">
  <div class="container">

    <div id="switcher">
      <div id="rotator" class="rotator">
        <div class="hand"></div>
        <div class="pointer"></div>
      </div>
    </div>
    <div id="center" class="center"></div>
    <div class='circle-12'></div>
    <div class='circle-24'></div>
    
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

请看一下这个jsfiddle，

https://fiddle.jshell.net/zoom2u/3nxyfhe3/

非常感谢你。

Answer 1

向上翻译对象并先离开，然后进行旋转。

    var el, offsetTop, offsetLft, offsetWdt,offsetHit , mouseDown;

    el = document.getElementById('switcher');
    var offset = getOffset( el );

    offsetTop = offset.top;
    offsetLft = offset.left;
    offsetWdt = el.offsetWidth;
    offsetHit = el.offsetHeight;
    mouseDown = false;

    function mouse(evt) {
      var center_x, center_y, mouse_x, mouse_y, radians, degree;
      evt.preventDefault();

      if (mouseDown == true) {
        center_x = (offsetLft) + (offsetWdt / 2);
        center_y = (offsetTop) + (offsetHit / 2);

        mouse_x = evt.pageX;
        mouse_y = evt.pageY;



        radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        degree = (radians * (180 / Math.PI) * -1) + 90;

        el.style.webkitTransform = 'translate(-50%, -50%) rotate(' + degree + 'deg)';
        el.style.MozTransform = 'translate(-50%, -50%) rotate(' + degree + 'deg)';
        el.style.msTransform = 'translate(-50%, -50%) rotate(' + degree + 'deg)';
        el.style.OTransform = 'translate(-50%, -50%) rotate(' + degree + 'deg)';
        el.style.transform = 'translate(-50%, -50%) rotate(' + degree + 'deg)';
      }
    }

    el.addEventListener("mousedown", function () {
      mouseDown = true;
      el.addEventListener("mousemove", mouse, false);
    }, false);

   

    el.addEventListener("mouseup", function () {
      mouseDown = false;
    })
  

  function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
      _x += el.offsetLeft - el.scrollLeft;
      _y += el.offsetTop - el.scrollTop;
      el = el.offsetParent;
    }
    return { top: _y, left: _x };
  }

.content {
      width: 900px;
      margin: 0 auto;
      border: 1px solid #DA574A;
    }

    .container {
      position: relative;
      width: 25em;
      height: 25em;
      padding: 2.8em;
      background-color: #ccc;
      margin: 0 auto;
    }

    .circle-24, .circle-12, .center, #switcher {
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      position: absolute;
      border-radius: 50%;
    }

    .circle-24 {
      width: 20em;
      height: 20em;
      z-index: 2;
      background-color: #fff;
    }

    .circle-12 {
      width: 15em;
      height: 15em;
      z-index: 3;
      background-color: #ff0;
    }

    .center {
      width: 0.5em;
      height: 0.5em;
      z-index: 5;
      background-color: red;
    }

    #switcher {
      height: 300px;
      width: 300px;
      z-index: 4;
      background-color: #d6dceb;
    }

    .rotator {
      position: absolute;
      width: 150px;
      height: 2px;
      left: 150px;
      top: 150px;
    }

    .rotator .hand {
      position: absolute;
      cursor: pointer;
      width: 110px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 40, 160, 0.12);
      transition: .4s;
    }

    .rotator .pointer {
      position: absolute;
      content: "";
      height: 40px;
      width: 40px;
      right: 0px;
      bottom: -20px;
      border-radius: 40px;
      background-color: rgba(0, 40, 160, 0.12);
    }

    .circle-12 div, .circle-24 div {
      width: 2em;
      height: 2em;
      background-color: #DA574A;
    }

<div class="content">
  <div class="container">

    <div id="switcher">
      <div id="rotator" class="rotator">
        <div class="hand"></div>
        <div class="pointer"></div>
      </div>
    </div>
    <div id="center" class="center"></div>
    <div class='circle-12'></div>
    <div class='circle-24'></div>
    
  </div>
</div>