Question

我在jquery中开发了一些图形的可视化工具。为此我使用了html5的新功能：canvas.getContext（'2d'），在这里解释： https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas 现在我可以在画布上绘制交互式节点，而无需使用flash或java。

我遇到的问题是光标相对于该画布的位置。我需要该位置来检查位置是否在节点的边界之间。

此功能在eclipse浏览器中运行良好，但由于某些奇怪的原因，它在chrome或firefox中不起作用。经过大量的调试后我发现节点的垂直位置（.y）是不正确的（所以当你在chrome中的节点下面20px或firefox节点下50px时一切正常）。我可以根据浏览器更改这些数字，但我希望这类解决方案存在很多问题。

我正在使用arborjs图书馆。我不认为这些问题本身就存在于这个库中，因为this site与同一个库完全相同，而且（几乎）同样使用它。

她是arbor.js文件最近函数的代码片段，它迭代所有节点并检查点击位置是否位于节点边界之间。

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
                    }
                },

这是调用/使用它的节点：

var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top);
selected = particleSystem.nearest(_mouseP);

有没有人对这些错误有一些经验？我希望我能充分描述这个问题。

光标在canvas元素（html5）上的位置在eclipse中是正确的，但在其他浏览器中则没有

0 个答案: