0

HTML キャンバスでいくつかの図形をドラッグしようとしていますが、マウス座標 [dx,dy] の変更の決定に関して問題が発生しています。

まずmousePos、ロールオーバー効果が問題なく機能するため、座標自体に問題はありません。私がやっていることは、最初に形状に入ったときに、マウス座標を保存することです。

pos = {x : mousePos[0] , y : mousePos[1]};

次に、onMotion はマウスが移動するたびに座標を更新し、現在の位置を記録します

dx=mousePos[0]-pos.x;
dy=mousePos[1]-pos.y;
pos = {x : mousePos[0] , y : mousePos[1]};

次に、dx 値と dy 値を形状座標に追加します (例として単純な長方形を取り上げます)。

ctx.fillRect(0+this.dx,0+this.dy,100+this.dx,100+this.dy);

マウスの動きが速すぎない限り、比較的うまく機能します (完全ではありませんが)。ウィンドウから出ずにマウスを非常に速く動かすと、長方形がマウスに追いつきません。マウスに追いつくのに遅延があるかどうかは理解できますが、どのようにデルタ値がオフになるのでしょうか? どこから始めたかは明らかで、プロセスで数十または数百のピクセルがスキップされたとしても、最終的にはマウスが停止し、正しいデルタ値が計算されるはずです。

ここで概念的な壁にぶつかったので、どんな助けも大歓迎です。

4

1 に答える 1

0

デルタの代わりに実際の位置を取得するために onMotion が起動されたときに、e.layerX-Y を取得しようとする場合があります。このように、「オフ」にすることはできません。

これを使用するには、style="padding:0px;margin=0px;" でシェイプを div に配置します。、位置が親ブロックに相対的であるためです。

于 2011-07-26T10:04:24.453 に答える