Canvas FireFox X Y 坐标

Question

如何在 Firefox 中解析任何 canvas 的 X Y 坐标。我在 Firefox 中使用 clientX 与 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 报告相对于文档客户端 window 的坐标，而不是相对于 canvas.

因此您必须考虑 canvas 在文档中的位置。您可以使用 .getBoundingClientRect 获取 canvas 相对于文档的位置。

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

Answer 2

Mozilla 在他们的 site:

上注意到关于 layerX/layerY

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

换句话说，尽量避免使用这些属性 - 它只会给您带来麻烦，因为它们并不适用于所有人。

今天更合适的方法是使用 getBoundingClientRect()，它是相对于 client window，也就是顾名思义的视口（说到、文档、页面、客户端可能会造成混淆，请参阅 this 以获得概述）。

它将考虑滚动（source）：

The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle.

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

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

现在您将拥有相对于 canvas 的正确位置。不过有几点需要注意：

不考虑边框厚度
不考虑填充

如果需要边框 and/or 填充，可以使用一个简单的技巧，那就是在 div 中插入 canvas 元素。改为在 div 元素上应用 padding/border。

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

Canvas FireFox X Y 坐标

Canvas FireFox X Y Coordinates

canvas

html5-canvas