7

ドラッグしてページパノラマを実装しようとしました。私の実装では、ユーザーがマウスボタンを離した後、Googleマップで地図をドラッグするように、ページがしばらく移動します。ここで、ユーザーがボタンを離したときにマウスが動かなくなったときに、この影響を防ぎたいと思います。mouseup問題は、イベントが発生したときにマウスが実際に動いているかどうかを検出する方法がわからないことです。

今のところ、ドラッグ速度を計算してこの問題に取り組み、速度を事前に評価された「感度」と比較しようとしました。これはほとんどの場合機能しますが、失敗することもあります。

jsFiddleの簡略化された例。フィドルで遊ぶときは、FFの中央ボタンを使用してください。ドラッグガブルdivは左ボタンに「固定」されます。

擬似コード：

AniMove = function (doc, element, sensitivity, panspeed, duration) {
    var mouseDown = function (e) {
            sTime = new Date();
            originalX = mouseX = e.clientX;
            originalY = mouseY = e.clientY;
            /* addEventListeners mousemove & mouseup for document */
            return;
        },
        mouseMove = function (e) {
            /* Setting new position for #square + new mouseX & Y */
            return;
        },
        mouseUp = function () {
            var dc = 1;
                /* removeEventListeners mousemove & mouseup */
                eTime = new Date();
                vX = Math.round((50 * panspeed) * (originalX - mouseX) / (eTime - sTime));
                vY = Math.round((50 * panspeed) * (originalY - mouseY) / (eTime - sTime));

            // Check whether mouse is moving or not,
            // now checking the speed against sensitivity, which is not reliable

                if (Math.abs(vX) < sensitivity){vX = 0;}
                if (Math.abs(vY) < sensitivity){vY = 0;}

                for (n = 0; n < dur; n++, dc += 0.001) {
                    vX = Math.round(vX  * dec / dc);
                    vY = Math.round(vY * dec / dc);
                    delay[n] = setTimeout(endDrag(n, vX, vY), n * 50);
                }
                return;
            },
            endDrag = function (n, vX, vY) {
                /* Setting new position for #square */
                return;
            },
            dec = 1 - 120 / duration;
    panspeed *= -0.01;
    duration /= 50;
    element.addEventListener('mousedown', mouseDown, false);    
}
drag = new AniMove(document, document.getElementById('square'), 20, 100, 500);

それで、この状況でマウスが動いているかどうかを検出することさえ可能ですか？たぶん私はこのタスクのために別のアプローチが必要ですか？

4

2 に答える 2

2

1つのアイデアは、mouseUp後.5秒間mouseMoveリスナーをアクティブに保つ（タイマーを設定する）ことです。マウスがその0.5秒間移動した場合（つまり、マウスの位置がmouseUpのときとは異なる場合）、動きがあったと想定し、それをアニメートします。

何が最高の感触を与えるかを確認するために、0.5秒で遊ぶ必要があるかもしれません。

于 2012-08-29T10:09:23.917 に答える
0

ビューを動かし続け、徐々に停止させたいですよね？

あなたがする必要があるのは、MouseUpイベントの前にそれがどれだけ速く動いていたかを記録し、それから0.5秒かそこら以上の増分で速度を下げることです。ボタンが押されていない場合にマウスが動き続けるかどうかは関係ありません。

「ボールを手放す」と、ボールがどれだけ速く転がるかは、次に手が行うこととは関係ありません。

したがって、ボタンが押されている間はマウスの速度を追跡し、ボタンが押されたら「フェードアウト」する必要があります。

あなたの場合、ボタンを離したときにマウスが動いていない場合、アナロジーはユーザーが「ボールを握った」ということです。したがって、すぐに停止する必要があります。

したがって、その状況を処理するために特別なことをする必要はありません。ユーザーがボタンを押したままマウスを停止した場合は、パンを停止します。

于 2012-08-29T09:55:06.507 に答える