JS 中的一些微小地方引起的误差积累

    事情是这样的, 我在写一个图片放大镜的时候, 发现一个有趣的现象, 如果放大倍数是整数,则一切正常, 如果放大倍数是一个小数,比如1.5, 则会发生偏差. 这是怎么回事? 我们用代码说话:

 

function ImageScope( a_oDoc ) { var _this = this; var _oDoc = a_oDoc; var _oImageScope = _GetElementById( "ImageViewerContent_ImageScope" ); _oImageScope.onmousemove = _OnMouseMoveImageScope; _oImageScope.onmouseup = _OnMouseUpImageScope; var _nCurX = -1; var _nCurY = -1; var _oImgObj = _GetElementById( "ImageViewerContent_ImageScope_ImageObject" ); var _oMirrorImgObj = _GetElementById( "ImageViewerContent_ImageObject" ); var _oViewerContent = _GetElementById( "VolumeViewerContent" ); var _nScopeWidth = 200; var _nScopeHeight = 200; var _nScaleSize = 2; var _nClickMiddleButtonTime = 0; function _GetElementById( a_strId ) { var oRet = _oDoc.getElementById( a_strId ); if( oRet == undefined ) alert( "Cannot find Element which id is /""+a_strId + "/"" ); return oRet; } function _OnMouseMoveImageScope( ) { if( _nCurX == -1 ) { _nCurX = event.screenX; _nCurY = event.screenY; } var nTmp = 0; nTmp = _oImgObj.style.pixelLeft - parseInt( (event.screenX-_nCurX)*_nScaleSize ); _oImgObj.style.left = nTmp + "px"; nTmp = _oImgObj.style.pixelTop - parseInt( (event.screenY-_nCurY)*_nScaleSize ); _oImgObj.style.top = nTmp + "px"; nTmp = _oImageScope.style.pixelLeft + event.screenX-_nCurX; _nCurX = event.screenX; _oImageScope.style.left = nTmp + "px" ; nTmp = _oImageScope.style.pixelTop + event.screenY-_nCurY; _oImageScope.style.top = nTmp + "px" ; _nCurY = event.screenY; } function _OnMouseUpImageScope( ) { if( event.button == 4 && _nClickMiddleButtonTime>0 ) { _oImageScope.style.display = "none"; _oImageScope.releaseCapture( ); _nCurX = _nCurY = -1; } _nClickMiddleButtonTime++; } //外部接口 this.Start = function( ) { _nClickMiddleButtonTime = 0; _oImageScope.style.width = _nScopeWidth + "px" ; _oImageScope.style.height = _nScopeHeight + "px" ; _oImageScope.style.display = "block"; _oImageScope.style.left = (event.x-_nScopeWidth/2) + "px"; _oImageScope.style.top = (event.y-_nScopeHeight/2) + "px"; var nTmp = parseInt(event.offsetX*_nScaleSize)-parseInt(_nScopeWidth/2) ; nTmp = nTmp<0?0:(-1*nTmp); _oImgObj.style.left = nTmp+"px"; nTmp = parseInt(event.offsetY*_nScaleSize)-parseInt(_nScopeHeight/2) ; nTmp = nTmp<0?0:(-1*nTmp); _oImgObj.style.top = nTmp+"px"; _oImgObj.src = _oMirrorImgObj.src; _oImgObj.width = _oMirrorImgObj.width; _oImgObj.height = _oMirrorImgObj.height; _oImgObj.style.zoom = 100*_nScaleSize + "%" ; _oImageScope.setCapture(); _nCurX = event.screenX; _nCurY = event.screenY; } this.Stop = function( ) { _oImageScope.style.display = "none"; } this.Reflash = function( ) { } this.SetScaleSize = function( a_nScaleSize ) { _nScaleSize = a_nScaleSize; } this.SetScopeSize = function( ) { } } 

 

可以看到, 我们使用比较 event.screenX 来比对移动的速度, 然后读取扩大图像的响应区域.当放大倍数是小数时,比如1.5 , 每次出发 onmousemove, 都会引起0.5个px的误差 , 这个误差逐渐积累,引起了误差积累.

 

修改后的代码如下:

function ImageScope( a_oDoc ) { var _this = this; var _oDoc = a_oDoc; var _oImageScope = _GetElementById( "ImageViewerContent_ImageScope" ); _oImageScope.onmousemove = _OnMouseMoveImageScope; _oImageScope.onmouseup = _OnMouseUpImageScope; var _nCurX = -1; var _nCurY = -1; var _fImgObjPixelLeft = -1; var _fImgObjPixelTop = -1; var _oImgObj = _GetElementById( "ImageViewerContent_ImageScope_ImageObject" ); var _oMirrorImgObj = _GetElementById( "ImageViewerContent_ImageObject" ); var _oViewerContent = _GetElementById( "VolumeViewerContent" ); var _nScopeWidth = 200; var _nScopeHeight = 200; var _nScaleSize = 2; var _nClickMiddleButtonTime = 0; function _GetElementById( a_strId ) { var oRet = _oDoc.getElementById( a_strId ); if( oRet == undefined ) alert( "Cannot find Element which id is /""+a_strId + "/"" ); return oRet; } function _OnMouseMoveImageScope( ) { if( _nCurX == -1 ) { _nCurX = event.screenX; _nCurY = event.screenY; } var nTmp = 0; //nTmp = _oImgObj.style.pixelLeft - (event.screenX-_nCurX)*_nScaleSize ; _fImgObjPixelLeft = _fImgObjPixelLeft - (event.screenX-_nCurX)*_nScaleSize ; _oImgObj.style.left = parseInt(_fImgObjPixelLeft) + "px"; _fImgObjPixelTop = _fImgObjPixelTop - (event.screenY-_nCurY)*_nScaleSize ; _oImgObj.style.top = parseInt(_fImgObjPixelTop) + "px"; nTmp = _oImageScope.style.pixelLeft + event.screenX-_nCurX; _nCurX = event.screenX; _oImageScope.style.left = nTmp + "px" ; nTmp = _oImageScope.style.pixelTop + event.screenY-_nCurY; _oImageScope.style.top = nTmp + "px" ; _nCurY = event.screenY; } function _OnMouseUpImageScope( ) { if( event.button == 4 && _nClickMiddleButtonTime>0 ) { _oImageScope.style.display = "none"; _oImageScope.releaseCapture( ); _nCurX = _nCurY = -1; } _nClickMiddleButtonTime++; } //外部接口 this.Start = function( ) { _nClickMiddleButtonTime = 0; _oImageScope.style.width = _nScopeWidth + "px" ; _oImageScope.style.height = _nScopeHeight + "px" ; _oImageScope.style.display = "block"; _oImageScope.style.left = (event.x-_nScopeWidth/2) + "px"; _oImageScope.style.top = (event.y-_nScopeHeight/2) + "px"; var nTmp = parseInt(event.offsetX*_nScaleSize)-parseInt(_nScopeWidth/2) ; nTmp = nTmp<0?0:(-1*nTmp); _oImgObj.style.left = nTmp+"px"; _fImgObjPixelLeft = nTmp;//_oImgObj.pixelLeft; nTmp = parseInt(event.offsetY*_nScaleSize)-parseInt(_nScopeHeight/2) ; nTmp = nTmp<0?0:(-1*nTmp); _oImgObj.style.top = nTmp+"px"; _fImgObjPixelTop = nTmp;//_oImgObj.pixelTop; _oImgObj.src = _oMirrorImgObj.src; _oImgObj.width = _oMirrorImgObj.width; _oImgObj.height = _oMirrorImgObj.height; _oImgObj.style.zoom = 100*_nScaleSize + "%" ; _oImageScope.setCapture(); _nCurX = event.screenX; _nCurY = event.screenY; } this.Stop = function( ) { _oImageScope.style.display = "none"; } this.Reflash = function( ) { } this.SetScaleSize = function( a_nScaleSize ) { _nScaleSize = a_nScaleSize; } this.SetScopeSize = function( ) { } } 

注意实际上增加了两个私有变量: _fImgObjPixelLeft , _fImgObjPixelTop , 来替代onmousemove中使用的 _oImgObj.style.pixelLeft/pixelTop .

_fImgObjPixelLeft/pixelTop 能够积累小数,最后最多只有一个pixel的误差.

反观本来有误差代码,每次使用_oImgObj.style.pixelLeft 乘以一个小数, 最后每次onmousemove都会造成一个pixel的误差.

 

Codes from I.R.software.ComicOnline