6

入力ボックス間の矢印キーの移動を許可する JavaScript / JQuery コードに取り組んでいます (はい、これが標準の UI を壊していることは承知しています)。

各要素をループし、各方向 (左、右、上、下) で最も近いものを見つけることによって機能します。

例

P1:(0, 0)、P2:(1, 0)、P3:(0, 2)

P1 には、右に 1 つの点 (P2) と上に 1 つの点 (P3) があります。
ポイント1

P2 には、左に 1 つの点 (P1) と上に 1 つの点 (P3) があります。
画像なし

P3 には 2 つのポイント (P1 と P2) がありますが、P1 の方が近いです。
ポイント1

したがって、最終的な動きは次のとおりです。

Up
  1 -> 3
  2 -> 3
Right
  1 -> 2
Down
  3 -> 1
Left
  2 -> 1

この例では:
P1 には 2 つの着信接続と 2 つの発信接続があります。
P2 には、1 つの着信接続と 2 つの発信接続があります。
P3 には、2 つの着信接続と 1 つの発信接続があります。

これは私に考えさせました。
1 つ以上のポイントにアクセスできない (着信接続が 0) ようなポイントのセットはありますか? または、そのようなセットが存在しないことを証明できますか?

補足:
上下のコンポーネントを無視する場合 (垂直分割で左右のみを使用)、P1: (0, 0)、P2: (2, 0)、P3: (1, 4) でアクセスできない P3 をポイントします。 ）。

誰にでも役立つ場合は、JavaScript / JQuery コードを次に示します。

function arrowKeyNavigation(elements) {
    // Get the position of each element.
    var elementOffsets = [];
    elements.each(function(key, element) {
        elementOffsets[key] = $(element).offset();
    });

    // Find the closest point in each direction and store the points in data('keyNav') for later use.
    for (var i = 0; i < elementOffsets.length; i++) {
        var closestPoints = [];

        for (var j = 0; j < elementOffsets.length; j++) {
            if (i != j) {
                var distance = calcDistanceSquared(elementOffsets[i], elementOffsets[j]);
                var quadrant = calcQuadrant(elementOffsets[i], elementOffsets[j]);

                if (closestPoints[quadrant] == undefined || calcDistanceSquared(elementOffsets[i], elementOffsets[closestPoints[quadrant]]) > distance) {
                    closestPoints[quadrant] = j;
                }
            }
        }

        var closestElements = [];
        for (var j = 0; j < closestPoints.length; j++) {
            closestElements[j] = elements[closestPoints[j]];
        }

        $(elements[i]).data('keyNav', closestElements);
    }
}

// Returns the distance between two points squared.
function calcDistanceSquared(offset1, offset2) {
    ...
}

// Returns 0, 1, 2 or 3 for left, up, right and down respectively.
// If a point is EXACTLY 45 degrees it will be classified as either left / right.
function calcQuadrant(offset1, offset2) {
    ...
}
4

1 に答える 1

1

私はそれについてもっと考えました、そして私は解決策を持っていると思います。証明スケッチは次のようになります。

平面内に有限数の点があると仮定します（R ^ 2）。任意のポイントを取り、それを目的地と呼びます。次に、他の点を取ります。赤で描いたように、その点でR^2が4つの象限に分割されます。定義上、宛先はこれら4つの象限の1つにあります。その方向に移動します。次の2つのいずれかが発生する可能性が
あります：1）目的地に到着し、完了しました
2）別の地点に移動します。

2の場合、近づきました（編集：1ノルムの距離、d（（x1、y1）、（x2、y2））= | x1-x2 | + | y1-y2 |）。これにはもっと証拠が必要ですが、私はスケッチしているだけです。目的地は現在、この新しいポイントのいくつかの象限にあります。

これを繰り返す場合は、常に目的地の方向に1ステップ近く移動すると（各ステップが変わる可能性があります）、目的地のポイントまでの距離が各ステップで減少することに注意してください。距離は常に減少しているため、ポイントを再訪することはできません。したがって、ポイントの数が限られている場合は、最終的に目的地に到達します。

于 2013-02-03T06:07:39.987 に答える