0

我在谷歌浏览器中的画布元素遇到了一些问题。

我有一个上面有多个矩形的画布。我跟踪名为目标的数组中的矩形。每次鼠标在画布上移动时，我都会调用悬停函数来检查鼠标是否位于其中一个矩形的顶部。

如果它在一个矩形的顶部，矩形应该用纯色填充。

看看这个 javascript 行：

function hover() {
    var location = Sys.UI.DomElement.getLocation(canvasElement);

    // loop through all rectangles in the targets array and caluclate if the mouse is on top op any of these rectangles.
}

这在 IE 和 Firefox 中运行良好。

但是在谷歌浏览器中，当我将鼠标悬停在与矩形相同尺寸的矩形上方时，矩形会被填充。

因为它总是在矩形实际位置上方的相同距离，所以我很快发现Sys.UI.DomElement getLocation方法在 Google Chrome 中返回不同的值。

结果如下：

火狐：

var location = Sys.UI.DomElement.getLocation(canvasElement);

location.x = 545
location.y = 297

丁目：

var location = Sys.UI.DomElement.getLocation(canvasElement);

location.x = 544
location.y = 94

所以水平方向有1个像素，垂直方向有200多个像素。

现在我知道当我将鼠标悬停在矩形上方的区域时，我的矩形是如何被填充的。

但是我当然想知道我应该怎么做才能避免使用谷歌浏览器的这种行为。

你有什么主意吗？

很感谢任何形式的帮助。

谢谢！

更多信息：

MSDN：链接

Sys.UI.DomElement getLocation 方法

获取 DOM 元素相对于所有者框架或窗口左上角的绝对位置。

4

1 回答 1

0

使用 JQuery 找到了另一个解决方案：

var location = $(canvasElement).offset();

然后只需使用 location.left 和 location.top

于 2012-05-18T12:33:01.623 回答