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
Post a Comment