Difference between revisions of "Browser event and coordinates"

From JSXGraph Wiki
Jump to: navigation, search
 
(12 intermediate revisions by 2 users not shown)
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">
var getMouseCoords = function(e) {
+
var getMouseCoords = function(e, i) {
         var cPos = board.getRelativeMouseCoordinates(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 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,
+
         var canCreate = true, i, coords, el;
            coords = getMouseCoords(e);
 
  
         for (i in board.objects) {
+
        if (e[JXG.touchProperty]) {
             if(JXG.isPoint(board.objects[i]) && board.objects[i].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
+
            // index of the finger that is used to extract the coordinates
                 cancreate = false;
+
            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;
 
                 break;
 
             }
 
             }
 
         }
 
         }
  
         if (cancreate) {
+
         if (canCreate) {
 
             board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);
 
             board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]);
 
         }
 
         }
Line 27: 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.addHook(up, 'mouseup');
+
     board.on('down', down);
 
</jsxgraph>
 
</jsxgraph>
  
 +
==The JavaScript Code==
 +
 +
<source lang="javascript">
 +
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);
 +
</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);