如何旋转点并放置在中心？

Question

我尝试旋转点以防父容器被旋转：

https://stackblitz.com/edit/js-qzfdbb?file=index.js

代码是：

var elParent = document.getElementById('parent');
var elCircle = document.getElementById('circle');

elCircle.addEventListener('click', function(e) {
  const circleSvg = document.getElementById('circle');
  const circleSvgRect = circleSvg.getBoundingClientRect();
  const parentRect = document.getElementById('parent').getBoundingClientRect();

  let leftTopX = circleSvgRect.left - parentRect.left;
  let leftTopY = circleSvgRect.top - parentRect.top;

  leftTopX = leftTopX + 15 - 5;
  leftTopY = leftTopY + 15 - 5;

  var degree = (20 * Math.PI) / 180;
  var xc = 250;
  var yc = 250;

  leftTopX =
    (leftTopX - xc) * Math.cos(degree) -
    (leftTopY - yc) * Math.sin(degree) +
    xc;
  leftTopY =
    (leftTopX - xc) * Math.sin(degree) +
    (leftTopY - yc) * Math.cos(degree) +
    yc;

  let c = document.getElementById('c');
  if (c) c.remove();

  c = document.createElement('div');
  c.setAttribute('id', 'c');
  c.style.setProperty('left', leftTopX + 'px');
  c.style.setProperty('top', leftTopY + 'px');
  elParent.appendChild(c);
});

要查看结果，请在红色圆圈内单击。在没有旋转的情况下，一个绿色圆圈被放置在红色圆圈的中心。否则有偏移量。

Answer 1

数学应该是这样的，但解决方案需要一些额外的计算来计算红色圆圈本身在外部矩形内的旋转。

注 1： 为简单起见，正文的边距被删除...
注 2： 滚动对脚本的影响很大。因此，如果不考虑它，该解决方案也可能不是很有用......

var elParent = document.getElementById('parent');
var elCircle = document.getElementById('circle');

elCircle.addEventListener('click', function(e) {
  const circleSvg = document.getElementById('circle');
  const circleSvgRect = circleSvg.getBoundingClientRect();
  const parentRect = document.getElementById('parent').getBoundingClientRect();

  const degree = getCurrentRotation(document.getElementById('parent'));

  const xcenter = parentRect.width / 2 + parentRect.left;
  const ycenter = parentRect.height / 2 + parentRect.top;

  const dx = (circleSvgRect.left + 10) - xcenter;
  const dy = ycenter - (circleSvgRect.top + 10); 

  console.log(dx + ' - ' + dy + '-' + Math.atan(dy / dx));

  const r = Math.sqrt(dx * dx + dy * dy);
  const curDegree = Math.atan(dy / dx) + degree;

  xnew = xcenter + Math.sign(-dx) * Math.sin(curDegree) * r;
  ynew = ycenter - Math.sign(-dx) * Math.cos(curDegree) * r;

  let c = document.getElementById('c');
  if (c) c.remove();

  c = document.createElement('div');
  c.setAttribute('id', 'c');
  c.style.setProperty('left', xnew + 'px');
  c.style.setProperty('top', ynew + 'px');
  elParent.appendChild(c);
});

//https://stackoverflow.com/questions/19574171/how-to-get-css-transform-rotation-value-in-degrees-with-javascript
function getCurrentRotation(el) {
  var st = window.getComputedStyle(el, null);
  var tm =
    st.getPropertyValue('-webkit-transform') ||
    st.getPropertyValue('-moz-transform') ||
    st.getPropertyValue('-ms-transform') ||
    st.getPropertyValue('-o-transform') ||
    st.getPropertyValue('transform') ||
    'none';
  if (tm != 'none') {
    var values = tm
      .split('(')[1]
      .split(')')[0]
      .split(',');
    return (angle = Math.atan2(values[1], values[0]));
  }
  return 0;
}

<div id="parent">
  <div id="circle" style="left: 100px; top: 100px"></div>
</div>

<style>
  body {
    margin:0px;
    padding:0px;
  }
  #circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: red;
    position: relative;
    
  }

  #c {
    position: absolute;
    width: 10px;
    height: 10px;
    background: green;
    border-radius: 50%;
  }

  #parent {
    width: 500px;
    position: relative;
    height: 500px;
    border: 1px solid #ccc;
    transform: rotate(180deg);
  }
</style>