Browser event and coordinates - Revision history

Michael at 08:05, 6 August 2013

2013-08-06T08:05:01Z

← Older revision		Revision as of 08:05, 6 August 2013
Line 46:		Line 46:
	return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);		return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);
	},		},
	up = function(e) {		down = function(e) {
	var canCreate = true, i, coords, el;		var canCreate = true, i, coords, el;

Line 68:		Line 68:
	board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});		board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});

	board.on('up', up);		board.on('down', down);
	</source>		</source>
	[[Category:Examples]]		[[Category:Examples]]

2013-08-06T08:04:04Z

← Older revision		Revision as of 08:04, 6 August 2013
Line 10:		Line 10:
	return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);		return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);
	},		},
	up = function(e) {		down = function(e) {
	var canCreate = true, i, coords, el;		var canCreate = true, i, coords, el;

Line 18:		Line 18:
	}		}
	coords = getMouseCoords(e, i);		coords = getMouseCoords(e, i);
	~~alert(i);~~
	for (el in board.objects) {		for (el in board.objects) {
	if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {		if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
Line 32:		Line 32:
	board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});		board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});

	board.on('up', up);		board.on('down', down);
	</jsxgraph>		</jsxgraph>

2013-08-06T07:56:58Z

← Older revision		Revision as of 07:56, 6 August 2013
Line 18:		Line 18:
	}		}
	coords = getMouseCoords(e, i);		coords = getMouseCoords(e, i);
	alert(i~~, e~~);		alert(i);
	for (el in board.objects) {		for (el in board.objects) {
	if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {		if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {

2013-08-06T07:56:49Z

← Older revision		Revision as of 07:56, 6 August 2013
Line 18:		Line 18:
	}		}
	coords = getMouseCoords(e, i);		coords = getMouseCoords(e, i);
	~~console.log~~(i, e);		alert(i, e);
	for (el in board.objects) {		for (el in board.objects) {
	if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {		if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {

2013-08-06T07:56:28Z

← Older revision		Revision as of 07:56, 6 August 2013
Line 18:		Line 18:
	}		}
	coords = getMouseCoords(e, i);		coords = getMouseCoords(e, i);
			console.log(i, e);
	for (el in board.objects) {		for (el in board.objects) {
	if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {		if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {

2013-08-06T07:55:37Z

← Older revision		Revision as of 07:55, 6 August 2013
Line 38:		Line 38:

	<source lang="javascript">		<source lang="javascript">
	var getMouseCoords = function(e) {		var getMouseCoords = function(e, i) {
	var cPos = board.getCoordsTopLeftCorner(e),		var cPos = board.getCoordsTopLeftCorner(e, i),
	absPos = JXG.getPosition(e),		absPos = JXG.getPosition(e, i),
	dx = absPos[0]-cPos[0],		dx = absPos[0]-cPos[0],
	dy = absPos[1]-cPos[1];		dy = absPos[1]-cPos[1];
Line 47:		Line 47:
	},		},
	up = function(e) {		up = function(e) {
	var canCreate = true,		var canCreate = true, i, coords, el;
	coords = getMouseCoords(e),
	el;		if (e[JXG.touchProperty]) {
			// index of the finger that is used to extract the coordinates
			i = 0;
			}
			coords = getMouseCoords(e, i);

	for (el in board.objects) {		for (el in board.objects) {

2013-08-06T07:53:01Z

← Older revision		Revision as of 07:53, 6 August 2013
Line 2:		Line 2:

	<jsxgraph width="400" height="400">		<jsxgraph width="400" height="400">
	var getMouseCoords = function(e) {		var getMouseCoords = function(e, i) {
	var cPos = board.getCoordsTopLeftCorner(e),		var cPos = board.getCoordsTopLeftCorner(e, i),
	absPos = JXG.getPosition(e),		absPos = JXG.getPosition(e, i),
	dx = absPos[0]-cPos[0],		dx = absPos[0]-cPos[0],
	dy = absPos[1]-cPos[1];		dy = absPos[1]-cPos[1];
Line 11:		Line 11:
	},		},
	up = function(e) {		up = function(e) {
	var canCreate = true,		var canCreate = true, i, coords, el;
	coords = getMouseCoords(e),
	el;		if (e[JXG.touchProperty]) {
			// index of the finger that is used to extract the coordinates
			i = 0;
			}
			coords = getMouseCoords(e, i);

	for (el in board.objects) {		for (el in board.objects) {

2013-02-20T14:44:56Z

← Older revision		Revision as of 14:44, 20 February 2013
Line 1:		Line 1:
	This example shows how to add a point whenever the user clicks on the board. The function getMouseCoords extracts the click coordinates from the event object and returns a JXG.Coords object with the point's coordinates on the board~~. up() is the event listener attached to the board via board.addHook()~~. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.		This example shows how to add a point whenever the user clicks on the board. The function getMouseCoords extracts the click coordinates from the event object and returns a JXG.Coords object with the point's coordinates on the board. The for loop in the event listener is to check if there is already a point as we don't want to create a point in this case.

	<jsxgraph width="400" height="400">		<jsxgraph width="400" height="400">
Line 28:		Line 28:
	board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});		board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});

	board.~~addHook~~(up, ~~'mouseup'~~);		board.on('up', up);
	</jsxgraph>		</jsxgraph>

Line 60:		Line 60:
	board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});		board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});

	board.~~addHook~~(up, ~~'mouseup'~~);		board.on('up', up);
	</source>		</source>
	[[Category:Examples]]		[[Category:Examples]]

2012-03-27T08:23:01Z

← Older revision		Revision as of 08:23, 27 March 2012
Line 43:		Line 43:
	},		},
	up = function(e) {		up = function(e) {
	var ~~cancreate~~ = true,		var canCreate = true,
	coords = getMouseCoords(e);		coords = getMouseCoords(e),
			el;

	for (i in board.objects) {		for (el in board.objects) {
	if(JXG.isPoint(board.objects[i]) && board.objects[i].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {		if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
	~~cancreate~~ = false;		canCreate = false;
	break;		break;
	}		}
	}		}

	if (~~cancreate~~) {		if (canCreate) {
	board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);		board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);
	}		}

2012-03-27T08:21:52Z

← Older revision		Revision as of 08:21, 27 March 2012
Line 11:		Line 11:
	},		},
	up = function(e) {		up = function(e) {
	var ~~cancreate~~ = true,		var canCreate = true,
	coords = getMouseCoords(e);		coords = getMouseCoords(e),
			el;

	for (i in board.objects) {		for (el in board.objects) {
	if(JXG.isPoint(board.objects[i]) && board.objects[i].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {		if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
	~~cancreate~~ = false;		canCreate = false;
	break;		break;
	}		}
	}		}

	if (~~cancreate~~) {		if (canCreate) {
	board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);		board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);
	}		}