Difference between revisions of "Browser event and coordinates"

From JSXGraph Wiki
Jump to: navigation, search
 
(6 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
<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.on('up', up);
+
     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),
+
 
            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 60: 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);