jquery でいくつかのグラフのビジュアライザーを作成しています。 このために、html5 の新しい機能を使用しています: canvas.getContext('2d') については、こちらで説明しています: https://developer.mozilla.org/en/Drawing_Graphics_with_Canvasフラッシュまたは Java.
私が抱えている問題は、そのキャンバスに対するカーソルの位置にあります。位置がノードの境界の間にあるかどうかを確認するには、その位置が必要です。
この機能は、Eclipse のブラウザーでは完全に機能しますが、奇妙な理由で、chrome や firefox では機能しません。多くのデバッグの後、ノードの垂直位置 (.y) が正しくないことがわかりました (したがって、chrome でノードの下 20 ピクセル、firefox でノードの下 50 ピクセルの場合、すべて正常に動作します)。ブラウザに応じてこれらの数値を変更できますが、その種のソリューションには多くの問題が予想されます。
私はarborjsライブラリを使用しています。問題がこのライブラリ自体にあるとは思いません。なぜなら、このサイトは同じライブラリと (ほぼ) 同じ使用法で完璧に機能するからです。
これは、arbor.js ファイルのnearest 関数のコード スニペットです。この関数は、すべてのノードを反復処理し、クリックされた位置がノードの境界の間にあるかどうかを確認します。
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);
そのようなバグの経験がある人はいますか? 問題を十分に説明したことを願っています。