Browser event and coordinates: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
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 11: Line 11:
     },
     },
     up = function(e) {
     up = 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) {

Revision as of 07:53, 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) {
        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);