在可缩放的iframe中获取正确的鼠标位置

Question

我在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;

我的任务是

Answer 1

似乎您根本没有与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实例为您完成了此任务。