Difference between revisions of "Browser event and coordinates"

From JSXGraph Wiki
Jump to: navigation, search
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]]

Revision as of 15: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);