Browser event and coordinates: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 34: Line 34:
<source lang="javascript">
<source lang="javascript">
var getMouseCoords = function(e) {
var getMouseCoords = function(e) {
         var cPos = board.getRelativeMouseCoordinates(e),
         var cPos = board.getCoordsTopLeftCorner(e),
             absPos = JXG.getPosition(e),
             absPos = JXG.getPosition(e),
             dx = absPos[0]-cPos[0],
             dx = absPos[0]-cPos[0],

Revision as of 11:29, 17 September 2011

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.

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);

        for (i in board.objects) {
            if(JXG.isPoint(board.objects[i]) && board.objects[i].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.addHook(up, 'mouseup');