Browser event and coordinates: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(8 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.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 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),
 
            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) {
Line 28: 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>


Line 34: 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 42: 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,
         var canCreate = true, i, coords, el;
             coords = getMouseCoords(e);
 
        if (e[JXG.touchProperty]) {
             // index of the finger that is used to extract the coordinates
            i = 0;
        }
        coords = getMouseCoords(e, i);


         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]]);
         }
         }
Line 59: 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.addHook(up, 'mouseup');
     board.on('down', down);
</source>
</source>
[[Category:Examples]]
[[Category:Examples]]

Latest revision as of 08: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);