HTML and CSS Reference
In-Depth Information
var
var mouseX1 = event . clientX - theCanvas . offsetLeft ;
var
var mouseY1 = event . clientY - theCanvas . offsetTop ;
mouseX = mouseX1 * xFactor ;
mouseY = mouseY1 * yFactor ;
allMoveHandler ( mouseX , mouseY );
}
function
function onTouchMove ( e ) {
iif ( e . touches . item ( 0 )) {
targetEvent = e . touches . item ( 0 );
} else
else {
targetEvent = e ;
}
touchX1 = targetEvent . clientX - theCanvas . offsetLeft ;
touchY1 = targetEvent . clientY - theCanvas . offsetTop ;
xFactor = theCanvas . width / window . innerWidth ;
yFactor = theCanvas . height / window . innerHeight ;
touchX = touchX1 * xFactor ;
touchY = touchY1 * yFactor ;
allMoveHandler ( touchX , touchY );
e . preventDefault ();
}
function
function allMoveHandler ( x , y ) {
mouseX = x ;
mouseY = y ;
}
The onMouseMove() function creates the xFactor and yFactor values by using the current
size of the canvas and browser window. It does this on each event just in case the window has
changed sizes since the last event. These are translated into mouseX and mouseY coordinates
that are passed into the allMoveHandler() function.
The allMoveHandler function takes whatever is passed in and sets the mouseX and mouseY
values.Thisisnot100%necessaryhere,becausetheyareglobalvalues,butthenextfunction,
onTouchMove ,willsetthe touchX and touchY valuesandpassthosein.Justincasewewanted
to do more in the allMoveHander() function, we made it accept in the parameters and be
Search WWH ::




Custom Search