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

您必须对其稍作调整，并替换硬编码的值。另外，这并不意味着高效或优雅。

<html>

<head>
    <title>Move to click position</title>
    <style>
        body {
            background-color: #FFF;
            padding: 0;
            margin: 0;
        }

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

        }

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

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

<body>
    <div id="contentContainer">
        <div id="thing">
            <div id="triangle">
            </div>
        </div>
    </div>
    <script>
        var theThing = document.querySelector("#thing");
        var container = document.querySelector("#contentContainer");
        var triangle = document.querySelector("#triangle");
        container.addEventListener("click", getClickPosition, false);
        // container.addEventListener("mousemove", getClickPosition, false);

        // we'll keep tarck of a vector going from center to head 
        var center = {
            'x': 75 / 2.0,
            'y': 75 / 2.0
        }
        var head = {
            'x': 75 / 2.0,
            'y': 0.0
        }

        function norm(vx, vy) {
            return Math.sqrt(vx * vx + vy * vy);
        }

        function normalize(vx, vy) {
            d = norm(vx, vy);
            return { 'x': vx / d, 'y': vy / d };
        }

        function dot(vx, vy, wx, wy) {
            return vx * wx + vy * wy;
        }

        function det(vx, vy, wx, wy) {
            return vx * wy - vy * wx;
        }

        // compute clockwise angle between two vectors
        function vwAngle(vx, vy, wx, wy) {
            return Math.atan2(det(vx, vy, wx, wy), dot(vx, vy, wx, wy));
        }

        function getClickPosition(e) {
            var xPosition = e.clientX;
            var yPosition = e.clientY;
            console.log(xPosition, yPosition);
            var spx = document.querySelector("#triangle").clientWidth / 2.0;
            var spy = document.querySelector("#triangle").clientHeight / 2.0;
            console.log(spx, spy);
            console.log();

            // vector from center to mouse
            var m = normalize(
                xPosition - center.x,
                yPosition - center.y
            );

            // v is a vector fron center to head
            var vNormalized = normalize(head.x - center.x, head.y - center.y);

            // clockwise angle between vectors m and v
            var between = -vwAngle(m.x, m.y, vNormalized.x, vNormalized.y);


            // Update vector v by updated head:

            // rotate v around point 
            var cosb = Math.cos(between);
            var sinb = Math.sin(between);
            var vRotated = {
                'x': cosb * vNormalized.x - sinb * vNormalized.y,
                'y': sinb * vNormalized.x + cosb * vNormalized.y
            };
            var d = norm(head.x - center.x, head.y - center.y);
            head.x = center.x + vRotated.x * d;
            head.y = center.y + vRotated.y * d;


            // translation:
            var dx = xPosition - center.x
            var dy = yPosition - center.y
            center.x = xPosition - 75 / 2.0;
            center.y = yPosition - 75 / 2.0;
            head.x += dx;
            head.y += dy;
            var translate3dValue = "translate3d(" + center.x + "px," + center.y + "px,0)";
            theThing.style.transform = translate3dValue;
            theThing.style.transform += "rotate(" + (between * 180 / Math.PI) + "deg)";

        }

    </script>
</body>
</body>

</html>

Answer 2

我似乎找到了解决之道。尽管它并不完美，但我认为它现在正在运行。我使用偏移方法来获取图像的中心，并使用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>

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

2 个答案: