Функция прокрутки экспоненциально перемещается

Question

У меня есть функция прокрутки для моего холста, которая определяет расстояние, перемещаемое мышью, и смещает все мои изображения на холсте.

Проблема в том, я едва переместить мышь и смещение число экспоненциально возрастает, и им не уверен, почему ... это моя функция, которая имеет дело с расчетом смещения:

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); 

    } 
} 

Am я вычитая смещение неправильно?

Answer 1

Вы хотите, чтобы смещение основывалось на смещении во время 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); 

    } 
}