在可缩放的 iframe 中获得正确的鼠标位置答案

【问题标题】：getting proper mouse position inside a zoomable iframe在可缩放的 iframe 中获得正确的鼠标位置
【发布时间】：2019-01-13 22:28:11
【问题描述】：

我有一个关于 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;

我的任务是

【问题讨论】：

标签： javascript svg svg-edit

【解决方案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 实例会为您执行此操作。

【讨论】：