javascript – 在没有周围元素存在的情况下跟踪画布中的鼠标位置

我无法获取鼠标位置w.r.t画布。

有两种情况:

1)如果画布div周围没有div元素,那么我可以得到鼠标的位置。

2)当画布被包装在一个div中时,offsetLeft和offsetTop不能像预期的那样工作

有什么区别?

最佳答案
您需要一个功能来获得position of the canvas element

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

并计算光标相对于该位置的当前位置:

$('#canvas').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coordinateDisplay = "x=" + x + ", y=" + y;
    writeCoordinateDisplay(coordinateDisplay);
});

offsetLeft和offsetTop的值相对于offsetParent,它是您的div节点。当你删除它们相对于身体的div,所以没有偏移减去。

Similary,e.pageX和e.pageY给出光标相对于文档的位置。这就是为什么我们从这些值中减去画布的偏移量到达真正的位置。

定位元素的替代方法是直接使用e.layerX和e.layerY的值。这比上述方法不太可靠,原因有二:

>当定位元素内不发生事件时,这些值也与整个文档相关
>它们不属于任何标准

转载注明原文:javascript – 在没有周围元素存在的情况下跟踪画布中的鼠标位置 - 代码日志