how to refer mouse/tap coordinates – GeoGebra
function ggbOnInit() {
var canvas = document.getElementsByTagName('canvas')[0];
canvas.addEventListener('click', getEventData);
canvas.addEventListener('mousemove', getEventData);
canvas.addEventListener('touchstart', getEventData);
canvas.addEventListener('touchmove', getEventData);
}
function getEventData(evt){
evt.preventDefault();
console.log('eventType = '+evt.type);
ggbApplet.setTextValue('text1', 'eventType = '+evt.type);
var result;
var canvas = document.getElementsByTagName('canvas')[0];
var deviceType = window.ontouchstart===null?'touchDevice':'mouseDevice';
var canvasWidth = canvas.width;
var styleWidth = canvas.style.width;
styleWidth = eval( styleWidth.slice( 0, styleWidth.indexOf('px') ) );
var styleHeight = canvas.style.height;
styleHeight = eval( styleHeight.slice( 0, styleHeight.indexOf('px') ) );
var ratio = canvasWidth / styleWidth;
if(deviceType == 'touchDevice'){
var touchX = evt.changedTouches[0].pageX;
var touchY = evt.changedTouches[0].pageY;
var clientRect = canvas.getBoundingClientRect();
var positionX = clientRect.left + window.pageXOffset;
var positionY = clientRect.top + window.pageYOffset;
var calcX = touchX - positionX;
var calcY = touchY - positionY;
calcX = calcX * styleWidth / clientRect.width;
calcY = calcY * styleHeight / clientRect.height;
result = [calcX, calcY];
}
if(deviceType == 'mouseDevice'){
result = [evt.offsetX, evt.offsetY];
}
console.log('offsetData = '+result);
ggbApplet.setTextValue('text2', 'offsetData = '+result);
result[0] = ratio * result[0];
result[1] = ratio * result[1];
result[0] = Math.round( result[0] );
result[1] = Math.round( result[1] );
console.log('shapedData = '+result);
ggbApplet.setTextValue('text3', 'shapedData = '+result);
return result;
}