Error accumulation caused by some tiny points in JS

This is the case. When I write an image magnifier, I find an interesting phenomenon. If the magnification is an integer, everything is normal. If the magnification is a decimal, such as 1.5, there will be deviations. what's going on? Let's talk with the code:

 

Function imagescope (a_odoc) <br/>{< br/> VaR _ this = This; <br/> VaR _ odoc = a_odoc; <br/> VaR _ oimagescope = _ getelementbyid ("imageviewercontent_imagescope"); <br/> _ oimagescope. onmousemove = _ onmousemoveimagmove; <br/> _ oimagmove. onmouseup = _ onmouseupimagescope; </P> <p> VaR _ ncurx =-1; <br/> VaR _ ncury =-1; <br/> VaR _ oimgobj = _ getelementbyid ("imageviewercontent_imagescope_imageobject "); <Br/> VaR _ omirrorimgobj = _ getelementbyid (" imageviewercontent_imageobject "); <br/> VaR _ oviewercontent = _ getelementbyid (" volumeviewercontent "); <br/> VaR _ nscopewidth = 200; <br/> VaR _ nscopeheight = 200; <br/> VaR _ nscalesize = 2; </P> <p> VaR _ nclickmiddlebuttontime = 0; <br/> function _ getelementbyid (a_strid) <br/>{< br/> var ORET = _ odoc. getelementbyid (a_strid); <br/> If (ORET = Undefined) <br/> alert ("cannot find element which ID is/" "+ a_strid +"/""); <br/> return ORET; <br/>}< br/> function _ onmousemoveimagescope () <br/>{< br/> If (_ ncurx =-1) <br/>{< br/> _ ncurx = event. screenx; <br/> _ ncury = event. screeny; <br/>}< br/> var ntmp = 0; <br/> ntmp = _ oimgobj. style. pixelleft-parseint (event. screenx-_ ncurx) * _ nscalesize); <br/> _ oimgobj. style. left = ntmp + "PX"; <br/> ntmp = _ oimgobj. style. pixeltop-parseint (event. screeny-_ ncury) * _ nscalesize); <br/> _ oimgobj. style. top = ntmp + "PX"; <br/> ntmp = _ oimagescope. style. pixelleft + event. screenx-_ ncurx; <br/> _ ncurx = event. screenx; <br/> _ oimagx. style. left = ntmp + "PX"; <br/> ntmp = _ oimagescope. style. pixeltop + event. screeny-_ ncury; <br/> _ oimagy. style. top = ntmp + "PX"; <br/> _ ncury = Event. screeny; <br/>}< br/> function _ onmouseupimagescope () <br/>{< br/> If (event. button = 4 & _ nclickmiddlebuttontime> 0) <br/>{< br/> _ oimagtime. style. display = "NONE"; <br/> _ oimagescope. releasecapture (); <br/> _ ncurx = _ ncury =-1; <br/>}< br/> _ nclickmiddlebuttontime ++; <br/>}< br/> // external interface <br/> This. start = function () <br/>{< br/> _ nclickmiddlebuttontime = 0; <br/> _ oimagescop E. style. width = _ nscopewidth + "PX"; <br/> _ oimageid. style. height = _ nscopeheight + "PX"; <br/> _ oimagheight. style. display = "Block"; <br/> _ oimagescope. style. left = (event. x-_ nscopewidth/2) + "PX"; <br/> _ oimagwidth. style. top = (event. y-_ nscopeheight/2) + "PX"; </P> <p> var ntmp = parseint (event. offsetx * _ nscalesize)-parseint (_ nscopewidth/2); <br/> ntmp = ntmp <0? 0 :(-1 * ntmp); <br/> _ oimgobj. style. left = ntmp + "PX"; <br/> ntmp = parseint (event. offsety * _ nscalesize)-parseint (_ nscopeheight/2); <br/> ntmp = ntmp <0? 0 :(-1 * ntmp); <br/> _ oimgobj. style. top = ntmp + "PX"; <br/> _ oimgobj. src = _ omirrorimgobj. SRC; <br/> _ oimgobj. width = _ omirrorimgobj. width; <br/> _ oimgobj. height = _ omirrorimgobj. height; <br/> _ oimgobj. style. zoom = 100 * _ nscalesize + "%"; <br/> _ oimagescope. setcapture (); </P> <p> _ ncurx = event. screenx; <br/> _ ncury = event. screeny; <br/>}< br/> This. stop = function () <br/>{< br/> _ oimagescope. style. display = "NONE"; <br/>}< br/> This. reflash = function () <br/>{< br/>}< br/> This. setscalesize = function (a_nscalesize) <br/>{< br/> _ nscalesize = a_nscalesize; <br/>}< br/> This. setscopesize = function () <br/>{< br/>}< br/>} 

 

We can see that we use the comparison event. screenx to compare the moving speed, and then read the expanded image response area. when the magnification is a decimal point, for example, 1.5, each onmousemove start will cause an error of 0.5 PX, which gradually accumulates, causing an error accumulation.

 

The modified code is as follows:

Function imagescope (a_odoc) <br/>{< br/> VaR _ this = This; <br/> VaR _ odoc = a_odoc; <br/> VaR _ oimagescope = _ getelementbyid ("imageviewercontent_imagescope"); <br/> _ oimagescope. onmousemove = _ onmousemoveimagmove; <br/> _ oimagmove. onmouseup = _ onmouseupimagescope; </P> <p> VaR _ ncurx =-1; <br/> VaR _ ncury =-1; <br/> VaR _ fimgobjpixelleft =-1; <br/> VaR _ fimgobjpixeltop =-1; <br/> VaR _ Oi Mgobj = _ getelementbyid ("imageviewercontent_imagescope_imageobject"); <br/> VaR _ omirrorimgobj = _ getelementbyid ("imageviewercontent_imageobject "); <br/> VaR _ oviewercontent = _ getelementbyid ("volumeviewercontent"); <br/> VaR _ nscopewidth = 200; <br/> VaR _ nscopeheight = 200; <br/> VaR _ nscalesize = 2; </P> <p> VaR _ nclickmiddlebuttontime = 0; <br/> function _ getelementbyid (a_strid) <br/> {< Br/> var ORET = _ odoc. getelementbyid (a_strid); <br/> If (ORET = undefined) <br/> alert ("cannot find element which ID is/" "+ a_strid +"/""); <br/> return ORET; <br/>}< br/> function _ onmousemoveimagescope () <br/>{< br/> If (_ ncurx =-1) <br/>{< br/> _ ncurx = event. screenx; <br/> _ ncury = event. screeny; <br/>}< br/> var ntmp = 0; <br/> // ntmp = _ oimgobj. style. pixelleft-(event. screen X-_ ncurx) * _ nscalesize; <br/> _ fimgobjpixelleft = _ fimgobjpixelleft-(event. screenx-_ ncurx) * _ nscalesize; <br/> _ oimgobj. style. left = parseint (_ fimgobjpixelleft) + "PX"; <br/> _ fimgobjpixeltop = _ fimgobjpixeltop-(event. screeny-_ ncury) * _ nscalesize; <br/> _ oimgobj. style. top = parseint (_ fimgobjpixeltop) + "PX"; <br/> ntmp = _ oimagint. style. pixelleft + event. screenx-_ ncurx; <br/> _ ncurx = event. Screenx; <br/> _ oimagx. style. left = ntmp + "PX"; <br/> ntmp = _ oimagescope. style. pixeltop + event. screeny-_ ncury; <br/> _ oimagy. style. top = ntmp + "PX"; <br/> _ ncury = event. screeny; <br/>}< br/> function _ onmouseupimagescope () <br/>{< br/> If (event. button = 4 & _ nclickmiddlebuttontime> 0) <br/>{< br/> _ oimagtime. style. display = "NONE"; <br/> _ oimagescope. releasecapture (); <B R/> _ ncurx = _ ncury =-1; <br/>}< br/> _ nclickmiddlebuttontime ++; <br/>}< br/> // external interface <br/> This. start = function () <br/>{< br/> _ nclickmiddlebuttontime = 0; <br/> _ oimagtime. style. width = _ nscopewidth + "PX"; <br/> _ oimageid. style. height = _ nscopeheight + "PX"; <br/> _ oimagheight. style. display = "Block"; <br/> _ oimagescope. style. left = (event. x-_ nscopewidth/2) + "PX"; <br/> _ oimagesco PE. style. top = (event. y-_ nscopeheight/2) + "PX"; </P> <p> var ntmp = parseint (event. offsetx * _ nscalesize)-parseint (_ nscopewidth/2); <br/> ntmp = ntmp <0? 0 :(-1 * ntmp); <br/> _ oimgobj. style. left = ntmp + "PX"; <br/> _ fimgobjpixelleft = ntmp; // _ oimgobj. pixelleft; </P> <p> ntmp = parseint (event. offsety * _ nscalesize)-parseint (_ nscopeheight/2); <br/> ntmp = ntmp <0? 0 :(-1 * ntmp); <br/> _ oimgobj. style. top = ntmp + "PX"; <br/> _ fimgobjpixeltop = ntmp; // _ oimgobj. pixeltop; </P> <p> _ oimgobj. src = _ omirrorimgobj. SRC; <br/> _ oimgobj. width = _ omirrorimgobj. width; <br/> _ oimgobj. height = _ omirrorimgobj. height; <br/> _ oimgobj. style. zoom = 100 * _ nscalesize + "%"; <br/> _ oimagescope. setcapture (); </P> <p> _ ncurx = event. screenx; <br/> _ ncury = event. screeny; </P> <p >}< br/> This. stop = function () <br/>{< br/> _ oimagescope. style. display = "NONE"; <br/>}< br/> This. reflash = function () <br/>{< br/>}< br/> This. setscalesize = function (a_nscalesize) <br/>{< br/> _ nscalesize = a_nscalesize; <br/>}< br/> This. setscopesize = function () <br/>{< br/>}< br/>} 

Note that two private variables are added: _ fimgobjpixelleft and _ fimgobjpixeltop to replace _ oimgobj. style. pixelleft/pixeltop in onmousemove.

_ Fimgobjpixelleft/pixeltop can accumulate decimals, and there is only one pixel error at most.

On the other hand, there is an error code. Every time _ oimgobj. style. pixelleft is used to multiply it by a decimal number, and every onmousemove operation will cause a pixel error.

 

Codes from I. R. Software. comiconline