1

我想获得相对于画布的 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 中则不行。如果画布元素位于 0,0 位置，它也适用于 Firefox。

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

我该怎么做才能让它在 FF 中也能正常工作？

4

4 回答 4

4

容器必须有

position: relative;

风格。不要使用该容器来设置边框样式，因为这意味着坐标中的 +n px（n= 边框大小）！

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

于 2012-08-08T14:43:13.787 回答
1

您可以尝试计算它：

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

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

于 2012-08-08T14:11:59.740 回答
1

这对我有用（纯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;    
}
于 2014-02-16T12:05:08.953 回答
1

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

我尝试了接受的答案，但它只解决了位于画布左侧/上方的其他元素的问题。对我来说，它没有考虑画布的边距。我不知道我是否做得对。我也不喜欢 Html 侧面解决方案的想法。有人更改了 Html，忘记了“位置：相对；” 导致几乎无法追踪的错误。

我使用了 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;

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

于 2014-06-04T07:47:32.550 回答