0

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);

そのようなバグの経験がある人はいますか? 問題を十分に説明したことを願っています。

4

0 に答える 0