4

マウスで移動した距離を検出し、キャンバス内のすべての画像をオフセットするキャンバスのスクロール機能があります。

問題は、マウスをほとんど動かさず、オフセット数が指数関数的に増加し、理由がわからないことです...これは、オフセット計算を処理する私の関数です:

canvas.addEventListener('mousedown', scrol_cnv, false);

function scroll_cnv(e) {
    if (e.button == 2) {//right click only
        var x = e.pageX; // get click X
        var y = e.pageY; //get click Y

            function clear() {
                this.removeEventListener('mousemove', updt, false);
            }

            function updt(evt) {
                var difx = evt.pageX - x;
                var dify = evt.pageY - y;

                   //this is where offset is becoming incorrect
                   //offsets is globally defined `window.offsets = {}`
                offsets.cur_offsetx -= difx;
                offsets.cur_offsety -= dify; 

            }
        this.addEventListener('mousemove', updt, false);
        this.addEventListener('mouseup', clear, false);

    }
}

オフセットを間違って減算していますか?

4

1 に答える 1

4

の時点でのオフセットに基づいてオフセットを設定しmousedownます。頻繁に起こる出来事は、根拠なく物事を変えるべきではありません。

おそらくリスナーも削除したいでしょうmouseup。そうしないと、クリックするたびに追加のリスナーが得られます (機能的な害はなく、不必要なオーバーヘッドだけです)。

canvas.addEventListener('mousedown', scrol_cnv, false);

function scroll_cnv(e) {
    if (e.button == 2) {//right click only
        var x = e.pageX; // get click X
        var y = e.pageY; //get click Y

        // store the initial offsets
        var init_offsetx = offsets.cur_offsetx;
        var init_offsety = offsets.cur_offsety;


            function clear() {
                this.removeEventListener('mousemove', updt, false);
                this.removeEventListener('mouseup', clear, false);
            }

            function updt(evt) {
                var difx = evt.pageX - x;
                var dify = evt.pageY - y;

                //this is where offset is becoming incorrect
                //offsets is globally defined `window.offsets = {}`
                offsets.cur_offsetx = init_offsetx - difx;
                offsets.cur_offsety = init_offsetx - dify; 

            }
        this.addEventListener('mousemove', updt, false);
        this.addEventListener('mouseup', clear, false);

    }
}
于 2013-08-03T23:45:06.680 に答える