получить правильную позицию мыши внутри масштабируемого фрейма - PullRequest
Новая
       25

получить правильную позицию мыши внутри масштабируемого фрейма

0 голосов
/ 13 января 2019

У меня есть проект на svg-edit, где я должен создать многоугольник одним щелчком мыши, svg-canvas (не HTML5-холст, предположим, как чертежную доску) можно масштабировать, я могу создать многоугольник при 100% увеличении, но когда я увеличиваю масштаб или уменьшить масштаб я не могу, на самом деле я не могу получить правильное положение x и y после увеличения . как вы можете видеть на изображении.

Я пробовал этот метод, чтобы получить очки - 

//Container 1440*1920
var svgcanvas = document.getElementById("svgcanvas");
//zoom
var initialZoom = 1440 * 1920;
zoomWidth = parseFloat(svgcanvas.style.width);
zoomHeight = parseFloat(svgcanvas.style.height);
currentZoom = zoomHeight * zoomWidth;
zoom = currentZoom / initialZoom;
//points
var rect = event.target.getBoundingClientRect();
var x1 = ((event.clientX) / zoom) - rect.left;
var y1 = ((eevent.clientY) / zoom) - rect.top;

enter image description here

и моя задача enter image description here

1 Ответ

0 голосов
/ 13 января 2019

Кажется, вы вообще не взаимодействуете с svg-edit API . Все становится намного проще, если вы делаете. 

// do not interact with the DOM element, but with the API object
var svgcanvas = svgEditor.canvas;

// your event listener function
function listener (event) {
    var rect = svgcanvas.getBBox(event.target);
    var x1 = rect.x;
    var y = rect.y;
    ...
}

Нет необходимости обрабатывать масштабирование; экземпляр SvgCanvas сделает это за вас.

...