Question

我想获得相对于画布的X，Y坐标（在鼠标移动事件中）。

我正在使用它：

<canvas id='c' onmousemove="xy(event)" WIDTH=500 HEIGHT=300>

JS：

function xy(e)
{
    x = e.offsetX||e.layerX;
    y = e.offsetY||e.layerY;
}

这适用于Chrome，但不适用于Firefox。如果canvas元素位于0,0位置，它也适用于Firefox。

看看这个：http://jsbin.com/ozowaz/10

我该怎样做才能让它在FF中运作？

Answer 1

容器必须

position: relative;

式。不要使用该容器来设置样式边框，因为它的坐标是+ n px（n = boder size）！

谢谢： http://dev.opera.com/articles/view/html5-canvas-painting/

Answer 2

您可以尝试计算它：

// ...
var x = e.pageX - canvas.offsetTop;

其中canvas是canvas dom元素。这应该适用于FF。

Answer 3

@ 2astalavista由于声誉我无法发表评论，所以我会把它放在这里，尽管我不应该这样做：

我尝试了接受的答案，但它只解决了位于画布左侧/上方的其他元素的问题。对我来说，它没有采取画布＆＃39;保证金考虑在内。我不知道我是否正确地做到了。此外，我不喜欢Html双面解决方案的想法。有人改变了Html，忘记了＆＃34;的位置：相对;＆＃34;导致一个几乎无法追踪的错误。

我使用了Nech的解决方案，但发现当我在画布的左侧或上方放置元素时，它无法正常工作。它只需要像画布一样的东西。保证金考虑在内。

我使用以下代码处理过，与Chrome部分相比，Firefox部分仍然只有95-99％的准确度。但它完成了工作：

function getEventX(event){
    if (event.offsetX) {
        return event.offsetX;
    }
    if (event.clientX) {
        var currentElement = event.currentTarget;
        var offsetLeft = currentElement.offsetLeft;

        while(currentElement.parentElement && currentElement.parentElement.offsetLeft){
            currentElement = currentElement.parentElement;
            offsetLeft += currentElement.offsetLeft;
        }     

        return event.clientX - offsetLeft;
    }
    return null;
};

function getEventY(event){
    if (event.offsetY) {
        return event.offsetY;
    }
    if (event.clientY) {
        var currentElement = event.currentTarget;
        var offsetTop = currentElement.offsetTop;

        while(currentElement.parentElement && currentElement.parentElement.offsetTop){
            currentElement = currentElement.parentElement;
            offsetTop += currentElement.offsetTop;
        }     

        return event.clientY - offsetTop;  
    }
    return null;
};

我还删除了传递给该函数的画布，你可以使用：

获取画布

event.currentTarget;

处理多幅画布时可能会更好。

Answer 4

这对我有用（纯粹的js）

function getX(event, canvas){
     if(event.offsetX){
       return event.offsetX;
     }
     if(event.clientX){
     return event.clientX - canvas.offsetLeft;
     }
    return null;
 }

function getY(event, canvas){
    if(event.offsetY){//chrome and IE
        return event.offsetY;
    }
    if(event.clientY){// FF
        return event.clientY- canvas.offsetTop;
    }
    return null;    
}

在Firefox中获取鼠标在画布上的位置

4 个答案: