Difference between revisions of "Browser event and coordinates"

From JSXGraph Wiki
Jump to: navigation, search
 
(2 intermediate revisions by the same user not shown)
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, 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])) {
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>
  
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]]

Latest revision as of 09:05, 6 August 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, i) {
        var cPos = board.getCoordsTopLeftCorner(e, i),
            absPos = JXG.getPosition(e, i),
            dx = absPos[0]-cPos[0],
            dy = absPos[1]-cPos[1];

        return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);
    },
    down = function(e) {
        var canCreate = true, i, coords, 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) {
            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('down', down);