Question

如何解决Firefox中任何画布的X Y坐标。我在Firefox中使用clientX vs layerX。出于某种原因，layerX无法正常工作。

   $("#circle").click(function(e) {

        painter.brush = function(e) {
            var shape = Circle(e.clientX, e.clientY, 0, paper);
            shapes.push(shape);

            $paper.bind('mousemove', function(e) {
                shape.updateEnd(e.clientX, e.clientY);
            });
        };

        $paper.bind('mouseup', function(e) {
            var shape = shapes.pop();             
            $(this).unbind('mousemove');
        });

        $paper.bind('mousedown', function(e) {
            painter.brush.call(this, e);
        });

    });

Answer 1

e.clientX, e.clientY报告相对于文档客户端窗口的坐标，而不是相对于画布的坐标。

因此，您必须考虑画布在文档上的位置。您可以使用.getBoundingClientRect来获取画布相对于文档的位置。

function handleMouseMove(e){
    BB=canvas.getBoundingClientRect();
    mouseX=parseInt(e.clientX-BB.left);
    mouseY=parseInt(e.clientY-BB.top);
}

Answer 2

Mozilla在site上注意到layerX / layerY：

非标准
此功能不符合标准且不符合标准跟踪。不要在面向Web的生产站点上使用它：它不会为每个用户工作。两者之间可能存在很大的不兼容性实现和行为可能在未来发生变化。

换句话说，尽量避免使用这些属性 - 它会给你带来麻烦，因为它们不会为每个人工作。

今天更合适的方法是使用getBoundingClientRect()相对于客户端窗口，也就是名称建议的视口（说到哪个，文档，页面，客户端可能会混淆），请参阅this以获取概述。

需要考虑滚动（source）：

视口区域的滚动量（或在计算时考虑任何其他可滚动元素边界矩形。

但是为了弥补元素位置和鼠标位置之间的差异，我们只需从鼠标坐标中减去元素的位置：

var rect = el.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;

现在你将拥有相对于画布的正确位置。但有几点需要注意：

边界厚度未考虑
填充不计入

如果需要边框和/或填充，可以使用一个简单的技巧，即将canvas元素插入div中。改为在div元素上应用填充/边框。

或者您可以使用getComputedStyle为元素计算边框/填充厚度（仅限左侧和顶部），然后从位置中减去这些厚度。

Canvas FireFox X Y坐标

2 个答案: