我的画布有一个滚动功能,它可以检测鼠标移动的距离并偏移画布中的所有图像。
问题是我几乎没有移动鼠标,偏移数量呈指数增长,我不知道为什么......这是我处理偏移计算的函数:
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);
}
}
我是否错误地减去了偏移?
答案 0 :(得分: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);
}
}