Положение мыши внутри autoscaled SVG

50
21 октября 2018, 02:00

Я пытаюсь решить проблемы относительно положения курсора мыши внутри моего документа SVG. Я бы хотел создать потенциометр, который будет следовать за курсором при перетаскивании, используя JavaScript на странице HTML.

Я пробовал evt.clientX / Y иevt.screenX / Y, но поскольку мой SVG находится в автомасштабировании, координаты внутри моего SVG отличаются.

Я искал ответ в течение нескольких дней, но я не мог найти решение (либо зная мой коэффициент масштабирования SVG в реальном времени, либо функцию для размещения мыши в системе координат SVG)

Вращение будет следовать простому правилу:

if ( evt.screenX < xc) ang = Math.atan( (evt.screenY - yc)/(evt.screenX - xc) )*360/(2*Math.PI) - 90; if( evt.screenX > xc )
ang = Math.atan( (evt.screenY - yc)/(evt.screenX - xc) )*360/(2*Math.PI) + 90;

(xc; yc),- как центр вращения и заменяя все evt.screenX / Y координатами мыши внутри моего SVG.

Answer 1

См. Этот код, который не только показывает, как преобразовать из пространства экрана в глобальное пространство SVG, но и как преобразовать точку из пространства SVG в преобразованное пространство элемента:
http://phrogz.net/svg/drag_under_transformation.xhtml

Вкратце:

// Находим root SVG элемента
var svg = document.querySelector('svg');
// Создаем SVGPoint для будущей математики
var pt = svg.createSVGPoint();
// Получаем точку в глобальном пространстве SVG
function cursorPoint(evt){
  pt.x = evt.clientX; pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}
svg.addEventListener('mousemove',function(evt){
  var loc = cursorPoint(evt);
  // Use loc.x and loc.y here
},false);

Я создал образец, соответствующий вашим потребностям (хотя и только в глобальном пространстве SVG)

это добавляет следующий метод:

function rotateElement(el,originX,originY,towardsX,towardsY){
  var angle = Math.atan2(towardsY-originY,towardsX-originX);
  var degrees = angle*180/Math.PI + 90;
  el.setAttribute(
    'transform',
    'translate('+originX+','+originY+') ' +
      'rotate('+degrees+') ' +
      'translate('+(-originX)+','+(-originY)+')'
  );
}

Рабочий пример

READ ALSO
Как использовать шрифты не с google fonts

Как использовать шрифты не с google fonts

До этого всё время делал в head ссылку на шрифт в google fonts вот так <link href="https://fontsgoogleapis

39
Как реализовать это?

Как реализовать это?

Есть вертикальный список div'ов,с классом res и функция,которая происходит при наведении курсора мыши на этот блок

44
Зациклить воспроизведения звука в chrome

Зациклить воспроизведения звука в chrome

есть подключенный файл звука через html5

42
Как такое реализовать на canvase?

Как такое реализовать на canvase?

Нужно чтобы карта была в целом 1000на1000, но ВИДНАЯ часть лишь 100на100, как это сделать? Можно ли как-то указать координаты начала ВИДИМОГО экрана...

26