У меня есть векторное изображение мыши на темно-сером фоне, которое я могу перетаскивать по странице после щелчка левой стороны. Я бы хотел, чтобы мышь вращалась в направлении курсора.
При том, что у меня есть, мышь поворачивается в направлении курсоров, когда я перемещаю курсор вниз или вправо. Он не работает должным образом при движении вверх или влево.
Я видел где-то, что atan предполагает, что система координат + x вправо и + y вверх. Я не уверен, что делать дальше.
Я вставил свой код ниже и заменил изображение белым прямоугольником.
var click_degrees;
const $dial = $('#item');
const radius = $dial.outerWidth();
const center_x = $dial.offset().left + radius;
const center_y = $dial.offset().top + radius;
function get_degrees(mouse_x, mouse_y) {
const radians = Math.atan2(mouse_y - center_y, mouse_x - center_x);
const degrees = radians * (180 / Math.PI);
return degrees;
}
var dragItem = document.querySelector("#item");
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
click_degrees = get_degrees(e.pageX, e.pageY);
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === dragItem) {
active = true;
}
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
active = false;
}
function drag(e) {
if (active) {
e.preventDefault();
const degrees = get_degrees(e.pageX, e.pageY) - click_degrees;
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, dragItem, degrees);
}
}
function setTranslate(xPos, yPos, el, deg) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0) rotate(" + deg + "deg)";
}
#container {
width: 100%;
height: 1000px;
background-color: #333;
overflow: hidden;
touch-action: none;
}
#item {
touch-action: none;
user-select: none;
transform-origin: 0 50%;
width: 100px;
height: 50px;
background:#fff;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
user-scalable=no" />
<title>Drag/Drop/Bounce</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="outerContainer">
<div id="container">
<div id="item"></div>
</div>
</div>
</body>
</html>
Пожалуйста, дайте мне знать, если вы хотите, чтобы я что-то разъяснил, или я должен добавить дополнительную информацию.