javascript - 在可缩放的 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 实例为您执行此操作。