12

私がやろうとしているのは、ページ上に不可視の座標のグリッドを等間隔に作成することです。次に<div>、onclickがトリガーされたときに、ポインターに最も近いグリッド座標にaを配置する必要があります。大まかなアイデアは次のとおりです。

代替テキスト

私はマウスの座標を追跡し、<div>うまく配置することができました。私がこだわっているのは、座標のグリッドの問題にどのように取り組むかです。

まず、すべての座標を配列に入れて、onclick座標と比較する必要がありますか？

または、グリッド座標がルールに従っていることを確認して、間隔がonclick座標に最も近いものの倍数である座標を見つけるようなことを行うことができますか？

次に、どのグリッドポイント座標が最も近いかをどこから始めればよいでしょうか。それについて行くための最良の方法は何ですか？

ありがとう！

4

3 に答える 3

8

どのグリッド ポイントが最も近いかを計算するという点では、たとえば、各ブロックが 10x10 ピクセルであるとします。グリッド インデックスを取得するには、それらを分割するだけです。

  1. [ 237 ; ] をクリックします。112 ]
  2. 10x10 のブロック
  3. グリッド インデックス = [ 237/10 ; 112/10 ] = [ 23.7 ; 11.2 ]
  4. それらを丸めて「最も近い」ものにします
  5. ブロック インデックスは 24;11 です

データを保存する必要がある場合は、クリック時にグリッド座標を配列にプッシュして、後で参照できます。

于 2010-04-26T10:54:24.653 に答える
7

onclick座標に最も近い間隔の倍数である座標を見つけるようなことはできますか？

もちろん。グリッドのポイント全体は、任意のポイントの大きな配列をカートで移動する必要がなく、単純な算術演算で計算できます。

どの格子点座標が最も近いかを調べるには、どこから始めればよいですか?

軸ごとに四捨五入した単純な割り算です。

#canvas { position: relative; width: 100px; height: 100px; border: solid red 1px; }
#nearest { position: absolute; width: 10px; height: 10px; background: yellow; }

<div id="canvas"><div id="nearest"></div></div>

var gridspacing= 10;
$('#canvas').mousemove(function(event) {
    var pos= $(this).offset();
    var gridx= Math.round((event.pageX-pos.left)/gridspacing);
    var gridy= Math.round((event.pageY-pos.top)/gridspacing);
    $('#nearest').css('left', (gridx-0.5)*gridspacing+'px').css('top', (gridy-0.5)*gridspacing+'px');
});
于 2010-04-26T11:02:24.187 に答える
4

私は最初、ボビンスと同様の回答を書いていましたが、彼は私より先にそこにたどり着きました。私はその方法が好きですが、彼のバージョンにはいくつかのフロアがあります（それでも非常に良い答えですが）.

あなたが望むのは、ボビンスがソリューションを提供する HTML レス グリッド (つまり、テーブルのようなマークアップなし) だと思います。その場合、コードはブラウザ間の互換性、読みやすさ、エラー、および速度のために大幅に最適化される場合があります。

したがって、コードは次のようにすることをお勧めします。

#canvas { position: relative; width: 100px; height: 100px; border: solid red 1px; }
#nearest { position: absolute; width: 10px; height: 10px; background: yellow; }

<div id="canvas"><div id="nearest"></div></div>

var
    canvasOffset = $("div#canvas").offset(),
    // Assuming that the space between the points is 10 pixels. Correct this if necessary.
    cellSpacing = 10;

$("div#canvas").mousemove(function(event) {
    event = event || window.event;
    $("div#nearest").css({
        top: Math.round((mouseCoordinate(event, "X") - canvasOffset.left) / cellSpacing) * cellSpacing + "px",
        left: Math.round((mouseCoordinate(event, "Y") - canvasOffset.top) / cellSpacing) * cellSpacing + "px"
    });
});

// Returns the one half of the current mouse coordinates relative to the browser window.
// Assumes the axis parameter to be uppercase: Either "X" or "Y".
function mouseCoordinate(event, axis) {
    var property = (axis == "X") ? "scrollLeft" : "scrollTop";
    if (event.pageX) {
        return event["page"+axis];
    } else {
        return event["client"+axis] + (document.documentElement[property] ? document.documentElement[property] : document.body[property]);;
    }
};

mouseCoordinate() 関数は、これら 2 つの関数の煮詰めたバージョンです。

function mouseAxisX(event) {
    if (event.pageX) {
        return event.pageX;
    } else if (event.clientX) {
        return event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    }
};

function mouseAxisY(event) {
    if (event.pageY) {
        return event.pageY;
    } else if (event.clientY) {
        return event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    }
};

私はあなたのプロジェクトのアイデアが本当に好きです, おそらく私は自分自身に似たものを作るでしょう:D

于 2010-04-26T18:42:51.017 に答える