# Difference between revisions of "Browser event and coordinates"

From JSXGraph Wiki

Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
|||

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 | + | 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. | + | 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. | + | board.on('up', up); |

</source> | </source> | ||

[[Category:Examples]] | [[Category:Examples]] |

## Revision as of 16:44, 20 February 2013

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.

## The JavaScript Code

```
var getMouseCoords = function(e) {
var cPos = board.getCoordsTopLeftCorner(e),
absPos = JXG.getPosition(e),
dx = absPos[0]-cPos[0],
dy = absPos[1]-cPos[1];
return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);
},
up = function(e) {
var canCreate = true,
coords = getMouseCoords(e),
el;
for (el in board.objects) {
if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
canCreate = false;
break;
}
}
if (canCreate) {
board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);
}
},
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});
board.on('up', up);
```