Поворачивать руку фигуры в соответствии с перемещением курсора мыши

Question

У меня есть изображение SVG доктора, которого я хочу немного оживить. Я хочу, чтобы рука указала на мышь. Однако я не могу заставить его правильно работать.
В настоящее время у меня есть следующий код:
Смотрите Codepen
Как видите, рука неподвижна, но плечо свободно перемещается, а должно быть наоборот.  Только когда я указываю мышкой на плечо, рука снова становится правильной.
Я использовал следующий код:
document.querySelector('#app')
    .addEventListener('mousemove', mascotArm);
    function mascotArm() {
      var arm = document.querySelectorAll('.arm');
      arm.forEach(function(arm) {
        let x = (arm.getBoundingClientRect().right);
        let y = (arm.getBoundingClientRect().top);
        let radian = Math.atan2(event.pageX - x, event.pageY + y);
        let rot = (radian * (90 / Math.PI))
        arm.style.transform = 'rotate('+ rot + 'deg)';
      })
    }

Я попробовал этот код, но я не смог правильно его реализовать в  SVG
var cv = document.createElement('canvas');
var ctx = cv.getContext('2d');
cv.width = 1224;
cv.height = 768;
document.body.appendChild(cv);

var centerX = 300, centerY = 200;

var arm = new Image();
arm.onload = function() {
    drawArrow(0);
};
var arm = document.querySelectorAll('.arm')

function drawArm(angle) {
  ctx.clearRect(0, 0, cv.width, cv.height);
  ctx.save();
  ctx.translate(centerX, centerY);
  ctx.rotate(-Math.PI / 2);
  ctx.rotate(angle);
  ctx.drawImage(arm, -arm.width / 2, -arm.height / 2);
  ctx.restore();
}

document.onmousemove = function(e) {
  var dx = e.pageX - centerX;
  var dy = e.pageY - centerY;
  var theta = Math.atan2(dy, dx);
    drawArm(theta);
};

Желаемое решение
Я хочу получить решение, которое состояло бы в том, чтобы я мог перемещать курсор мышки на странице, и  рука указывала бы синхронно  на изменения положения курсора. Если это возможно, было бы здорово, если бы рука могла бы двигаться только на 90 градусов вверх и вниз, чтобы она не совершала странных поворотов.
Свободный перевод вопроса Make arm point towards mouse direction от участника  @Coen Hallie.

Alexandr_TT · Answer

Вам понадобится преобразование transform origin (начала координат) для вращения руки .arm. Например, вы можете попробовать .arm {transform-origin: 280px 200px;}. В коде я добавил маленький красный круг, чтобы отметить центр вращения. Вы можете удалить круг и изменить положение центра вращения. Обратите внимание, что я использую положение центра вращения в JavaScript. Тебе тоже придется это поменять. В JavaScript это Math.atan2 (y, x), а не Math.atan2 (x, y). Пожалуйста, прочитайте о Math.atan2. Также рука имеет другой угол внутри контейнера .arm. Вам нужно будет принять во внимание и этот угол. Чтобы понять, что происходит, я добавил черный прямоугольник размером с ограничивающую рамку руки. Вы можете попробовать arm.style.transform = 'rotate (' + (rot - 20) + 'deg)'; Также вы слушаете мышь над приложением. Как вы можете видеть, я слушаю мышь над SVG Elemet. Я полагаю, вам нужен доктор в правой части приложения. Чтобы разместить его там, я применяю #app {height: 100vh; Приложение теперь так же широко, как и его родитель. Также у svg {width: 100%; height: 100%} Это растянет элемент svg над приложением. Чтобы позиционировать доктора справа, я использую preserveAspectRatio = "xMaxYMax meet" let svg = document.querySelector('#svg'); svg.addEventListener('mousemove', mascotArm); //the hub position let X = 280; let Y = 200; function mascotArm(event) { var arm = document.querySelector('.arm'); let p = getMousePositionSVG(event) let x = p.x; let y = p.y; let radian = Math.atan2(Y-y, X-x); let rot = (radian * (180 / Math.PI)) arm.style.transform = 'rotate('+ (rot - 20) + 'deg)'; } //функция для вычисления положения мыши над элементом SVG function getMousePositionSVG(event) { var point = svg.createSVGPoint(); point.x = event.clientX; point.y = event.clientY; point = point.matrixTransform(svg.getScreenCTM().inverse()); return point; } #app { background: #efefef; height:100vh } svg{width:100%; height:100%} .arm{transform-origin: 280px 200px;

Свободный перевод ответа Make arm point towards mouse direction от участника @enxaneta.

Поворачивать руку фигуры в соответствии с перемещением курсора мыши

One Answer

Add your own answers!

Ask a Question