javascript - Canvas presents problems when resizing the screen -


i have design , works perfectly: http://jsfiddle.net/98bgq/22/

var offsetx = canvasoffset.left; var offsety = canvasoffset.top; var scrollx = $canvas.scrollleft(); var scrolly = $canvas.scrolltop(); 

but when resize screen of browser, seems canvas begins operate in totally different way normal, in above example can not click few more parts of design, how can solve this?

since you're using jquery, easiest use event.pagex. e.g.

mousex = e.pagex - $canvas.offset().left; mousey = e.pagey - $canvas.offset().top; 

edit: non-jquery, works well:

mousex = e.hasownproperty('offsetx') ? e.offsetx : e.layerx; mousey = e.hasownproperty('offsety') ? e.offsety : e.layery; 

event.pagey/x returns mouse position relative top/left edge of document. $elmnt.offset() returns coordinates of element relative document. subtracting latter former gives relative position of mouse in canvas.

event.offsety/x/event.layery/x give coordinate of event relative current layer. layerx doesn't work chrome, if it's not present, offsetx used instead.


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -