如何在不影响父元素转换的情况下放置子元素？更新！！！ [Javascript]答案

【问题标题】：How to place child element without being affected of transformation of parent element? UPDATED!!! [Javascript]如何在不影响父元素转换的情况下放置子元素？更新！！！ [Javascript]
【发布时间】：2020-06-09 23:27:38
【问题描述】：

我有一个显示可旋转图形的父 div。我想在鼠标点击时放置点。这是我的地方功能：

module.exports.place = function (event, id) {
  let div = document.createElement("div");
  div.className = "container-fluid";
  div.id = id;
  let avakio_wrapper = document.getElementById("avakio");
  avakio_wrapper.appendChild(div);
  let parentPosition = getPosition(event.currentTarget);

  xPosition = event.clientX - parentPosition.x - div.clientWidth / 2;
  yPosition = event.clientY - parentPosition.y - div.clientHeight / 2;
  div.style.left = xPosition + "px";
  div.style.top = yPosition + "px";
}

当图形未旋转时，它按预期工作，但当我旋转图形时，它首先将点放在鼠标单击下，然后应用旋转变换并移动它。我有截图显示我描述的内容。红点表示点击位置。感谢您的帮助。

更新！！！！

这是我的代码的实现：

// Calculate clicking pos based of top-left corner of div
  xPosition = event.clientX - parentPosition.x - dot.clientWidth / 2;
  yPosition = event.clientY - parentPosition.y - dot.clientHeight / 2;

  let centerx = parentDiv.clientWidth / 2;
  let centery = parentDiv.clientHeight / 2;

  // Find Rotation angle
  let rot = parentDiv.style.getPropertyValue("transform");
  if (rot != "") {
    rot = rot.split("(")[1].split("deg")[0];
  } else {
    rot = 0;
  }

  // Perform Invert Rotation
  xPosition = centerx - xPosition;
  yPosition = centery - yPosition;

  let xRot =
    xPosition * Math.cos(rot * (Math.PI / 180)) +
    yPosition * Math.sin(rot * (Math.PI / 180));
  let yRot =
    -xPosition * Math.sin(rot * (Math.PI / 180)) +
    yPosition * Math.cos(rot * (Math.PI / 180));

  // Calculate again based top-left corner
  dot.style.left = centerx - xRot + "px";
  dot.style.top = centery - yRot + "px";

但是我遇到了一些问题。当父 div 旋转时，点会根据旋转角度放置一些像素。我有一些不同旋转角度的截图。我在纸上做了很多天的数学运算，但仍然无法弄清楚是什么原因造成的。

【问题讨论】：

您可以不将鼠标点放在旋转元素中：<div id="parent"><div id="rotated"></div><div name="dot"></div></div>。或者将实际旋转值存储在 var 中，并使用它来计算点的实际位置。
请考虑使用stack snippet 或其他可用工具（如jsfiddle.net 或codepen.io）为我们创建当前问题的Minimal, Reproducible Example。
@JulienMaret 我希望它们成为图表的一部分并在以后随它一起旋转，这就是我将它们用作子节点的原因。我认为我可以使用旋转值来计算不同的顶部和左侧值，但我无法弄清楚数学。
calculator.academy/…。首先得到你图表的中心并计算你的坐标点。然后应用公式： X=xcos(θ)+ysin(θ) Y=−xsin(θ)+ycos(θ) 计算实际位置（倒退第一步）。示例：图形为 100x100，您的点距左上角为 (15,30)。中心：（50,50）；点：(50-15, 50-30) = (35,20) 点旋转 30 度，公式将 (40,0) 舍入为正常值：(50-40, 50-0) = (10,50) 所以你的当父对象旋转 30 度时，实际点位置是 (10,50) 而不是 (15,30)
谢谢@JulienMaret，您的解决方案正好解决了我的问题！

标签： javascript transform cartesian-coordinates

【解决方案1】：

这里是数学的应用。他们仍然移动了一点（我认为这是因为微积分不精确）。我有点卡在这里，也许有人能够解决它。

function rotate() {
  let parent = document.getElementById("parent")
  let rot = document.getElementById("value").value
  let transform = parent.style.transform
  transform = "rotate("+ (Number(transform.substr(7,transform.length-11)) + Number(rot)) +"deg)"
  parent.style.transform = transform
  let dots = document.getElementsByClassName("dot")
 for (i = 0; i < dots.length; i++)
  dotpos(parent, dots[i],rot)
}

function dotpos(parent,dot,rot) {
 rot = rot * (Math.PI/180) //convert to radian
 let xCenter = parent.offsetWidth /2
 let yCenter = parent.offsetHeight /2
 let x = xCenter - Number(dot.style.left.substring(0, dot.style.left.length - 2))
 let y = yCenter - Number(dot.style.top.substring(0, dot.style.top.length - 2))
 let xRot = x*Math.cos(rot)+y*Math.sin(rot)
 let yRot = -x*Math.sin(rot)+y*Math.cos(rot)
 dot.style.left = xCenter -xRot + "px"
 dot.style.top = yCenter -yRot + "px"
}

#parent {
  height: 100px;
  width : 100px;
  background-color: grey;
}
.dot {
  height: 5px;
  width : 5px;
  border-radius: 5px; 
  background-color: red;
}

<div id="parent" style = "transform:rotate(0deg)">
  <div class ="dot" style="position:relative;left:15px;top:30px;"></div>
  <div class ="dot" style="position:relative;left:60px;top:50px;"></div>
</div>
<form>
  <input type="text" id="value"><br>
</form>

<button onclick="rotate()">rotate</button>

【讨论】：