D3. js: после увеличения и уменьшения начальные координаты SVG отличаются от окна - PullRequest
Новая
       6

D3. js: после увеличения и уменьшения начальные координаты SVG отличаются от окна

0 голосов
/ 09 января 2020

Я использую этот код, чтобы найти положение мыши в окне, и оно работает, но проблема в том, что когда я увеличиваю SVG (масштаб преобразования), координата (0,0) не одинакова для окна и SVG. Я пытаюсь сделать инструмент выбора для выбора нескольких объектов в SVG и после увеличения, прямоугольник выделения, например, 200x200, но на SVG с примененным масштабом (scale = 2) 400x400. Также, если я создаю только событие для D3, у меня возникают проблемы, когда мышь выходит из области SVG и выбор прекращает двигаться. Как использовать масштаб на инструменте выделения? 

let svgDomSelector = document.querySelector("svg");

changeCordForWindowsMouseMove(event) {
    let anchorPoint;
    anchorPoint = this.svgCoords(event, this.svgDomSelector);

    let targetPoint = this.svgCoords(event, this.svgDomSelector);
    this.shiftViewBox(anchorPoint.x - targetPoint.x,
      anchorPoint.y - targetPoint.y);

  }

  shiftViewBox(deltaX, deltaY) {
    this.svgDomSelector.viewBox.baseVal.x += deltaX;
    this.svgDomSelector.viewBox.baseVal.y += deltaY;
  }

  svgCoords(event, elem) {
    var ctm = elem.getScreenCTM();
    var pt = this.svgDomSelector.createSVGPoint();
    pt.x = event.clientX;
    pt.y = event.clientY;
    return pt.matrixTransform(ctm.inverse());
  }
...