根据鼠标点击移动和旋转对象？

Question

我试图以一种方式移动一个对象,使其旋转方向与鼠标单击的方向相同,并移动到鼠标单击的位置.到目前为止,我安排了运动,但我认为角度有问题,因为它不像我那样旋转.我哪里弄错了？我该如何解决？

var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);

function getClickPosition(e) {
  var xPosition = e.clientX;
  var yPosition = e.clientY;
  var translate3dValue = "translate3d(" + xPosition + "px," + yPosition +
    "px,0)";
  var spx = document.querySelector("#triangle").clientWidth / 2;
  var spy = document.querySelector("#triangle").clientHeight / 2;
  var angle = Math.atan2(yPosition - spy, xPosition - spx) * 180 /
    Math.PI;
  if (angle < 0) {
    angle = 360 - (-angle);
  }

  theThing.style.transform = translate3dValue;
  theThing.style.transform += "rotate(" + angle + "deg)"
}

body {
  background-color: #FFF;
  padding: 0;
  margin: 0;
}

#contentContainer {
  width: 500px;
  height: 500px;
  border: 15px #EDEDED solid;
  overflow: hidden;
  background-color: #F2F2F2;
  cursor: pointer;
}

#thing {
  width: 75px;
  height: 75px;
  background-color: rgb(255, 207, 0);
  border-radius: 0%;
  transform: translate3d(200px, 100px, 0);
  transition: transform.2s ease-in;
}

#triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 45px solid transparent;
  border-bottom: 75px solid black;
}

<div id="contentContainer">
  <div id="thing">
    <div id="triangle">
    </div>
  </div>
</div>

Answer 1

我似乎找到了解决办法。尽管它并不完美，但我认为它现在正在发挥作用。我使用偏移方法来获取图像的中心并使用Math.atan2方法找到中心与鼠标之间的角度。

var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);

function getClickPosition(e) {
  var xPosition = e.clientX;
  var yPosition = e.clientY;
  var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
  var spx = document.querySelector("#thing").clientWidth / 2;
  var spy = document.querySelector("#thing").clientHeight / 2;
  var box = $("#thing");
  var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
  var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
  theThing.style.transform = translate3dValue;
  theThing.style.transform += "rotate(" + angle + "deg)"

}

body {
  background-color: #FFF;
  padding: 0;
  margin: 0;
}

#contentContainer {
  width: 550px;
  height: 350px;
  border: 15px #EDEDED solid;
  overflow: hidden;
  background-color: #F2F2F2;
  cursor: pointer;
}

#thing {
  width: 75px;
  height: 75px;
  background-color: rgb(255, 207, 0);
  border-radius: 0%;
  transform: translate3d(200px, 100px, 0);
  transition: transform.8s ease-in;
}

#triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 45px solid transparent;
  border-bottom: 75px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
  <div id="thing">
    <div id="triangle">
    </div>
  </div>
</div>