为什么点击坐标不是我所期望的？答案

【问题标题】：Why are the click coordinates not what I expect?为什么点击坐标不是我所期望的？
【发布时间】：2014-05-08 18:39:32
【问题描述】：

为什么当我单击 Raphael 路径元素的开头或结尾时，坐标不是我所期望的？查看示例 (http://jsfiddle.net/gharabed/prh2J/1/)

在example 中，我有一条从 (10,10) 到 (100,100) 的路径。如果我在接近 100,100 的路径的最尖端单击，我会得到一个类似于 (107,108) 的单击事件坐标。我离行尾的距离不能超过 4 或 5 个像素。事实上，我看起来只有 2 个（最多 3 个）像素。坐标好像有点不对。我不是在这里考虑什么吗？

function sendAlert(e) {
    alert("Clicked at: " + e.x + "," + e.y + "   I would expect it to be near the coordinates in the path defined (10,10) or (100,100)");
}

var paper = Raphael(document.getElementById('myid'),200,200);
var line = paper.path('M10,10L100,100');
line.attr({"stroke":"red","stroke-width":4});
line.click(sendAlert);
alert("Click as close as you can to the end of either end of the line segment.")

【问题讨论】：

你得到了关于文档的坐标，而不是关于 svg 元素的坐标。在示例中，主体有 8px 的边距 - 它给出了差异。只需使用 svg 元素的位置来校正坐标

标签： javascript svg raphael

【解决方案1】：

我同意 Vasil 所说的话。我做了一个小实用函数，它会给你精确的坐标。只需将 mousedown 事件传递给此函数。（在你的 sendalert 函数中调用这个函数）

（我正在使用 javascript）。

var mainsvg = document.getElementsByTagName('svg')[0];

    function getSvgCordinates(event) {
                var m = mainsvg.getScreenCTM();
                var p = mainsvg.createSVGPoint();
                var x, y;

                x = event.pageX;
                y = event.pageY;

                p.x = x;
                p.y = y;
                p = p.matrixTransform(m.inverse());

                x = p.x;
                y = p.y;

                x = parseFloat(x.toFixed(3));
                y = parseFloat(y.toFixed(3));

                return {x: x, y: y};
            }

【讨论】：