Javascript 光标在画布元素(html5)上的位置在eclipse中正确,但在其他浏览器中不正确
我正在开发jquery中一些图形的可视化工具。为此,我使用了html5的新功能:canvas.getContext('2d'),解释如下: 现在我可以在画布上绘制交互式节点,而无需使用flash或java 我遇到的问题是光标相对于画布的位置。我需要那个位置来检查这个位置是否在节点的边界之间 这个功能在eclipse浏览器中运行得非常完美,但由于某些奇怪的原因,它在chrome或firefox中不起作用。 经过大量调试后,我发现节点的垂直位置(.y)不正确(因此,当您在chrome中的节点下方20px或在firefox中的节点下方50px时,一切正常)。我可以根据浏览器的不同来更改这些数字,但我预计这种解决方案会有很多问题 我在arborjs图书馆工作。我认为问题不在于这个库本身,因为它可以完美地使用同一个库和(几乎)相同的使用 Her是arbor.js文件中最近函数的代码片段,它迭代所有节点并检查单击的位置是否位于节点边界之间Javascript 光标在画布元素(html5)上的位置在eclipse中正确,但在其他浏览器中不正确,javascript,html,google-chrome,canvas,mouse-position,Javascript,Html,Google Chrome,Canvas,Mouse Position,我正在开发jquery中一些图形的可视化工具。为此,我使用了html5的新功能:canvas.getContext('2d'),解释如下: 现在我可以在画布上绘制交互式节点,而无需使用flash或java 我遇到的问题是光标相对于画布的位置。我需要那个位置来检查这个位置是否在节点的边界之间 这个功能在eclipse浏览器中运行得非常完美,但由于某些奇怪的原因,它在chrome或firefox中不起作用。 经过大量调试后,我发现节点的垂直位置(.y)不正确(因此,当您在chrome中的节点下方20
nearest: function (x) {
var original = x;
if (u !== null) {
x = g.fromScreen(x)
}
var w = {
node: null,
point: null
};
var v = g;
$.each(c.nodes, function (B, y) {
var z = y._p, pos = g.toScreen(z),
width = y.data.width,
height = y.data.height,
pos = g.toScreen(z),
bound1 = pos.x - width/2,
bound2 = pos.x + width/2,
bound3 = pos.y - height/2,
bound4 = pos.y + height/2;;
if (z.x === null || z.y === null) {
return
}
if (bound1 < original.x && original.x < bound2 &&
bound3 < original.y && original.y < bound4) {
w = {
node: y,
point: z
};
if (u !== null) {
w.screenPoint = g.toScreen(z)
}
}
});
if (w.node) {
if (u !== null) {
w.distance = g.toScreen(w.node.p).subtract(g.toScreen(x)).magnitude()
}
return w
} else {
return null
}
},
有没有人有过这种虫子的经验?
我希望我已经充分描述了这个问题。左
位置的值从哪里来?sry我忘了包括那行代码。(我将其添加到代码中)它包含画布的偏移量(这在每个浏览器中都是相同的,因此没有问题)
var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top);
selected = particleSystem.nearest(_mouseP);