jQuery get all x and y between mousedown and mouseup

Question

Im using Raphael to make a simple drawing app. I trying to draw squiggly lines(is there a better word for this) at the moment, so I want to capture all the x's and y's between mousedown and mouseup. At this stackoverflow question jQuery continuous mousedown there is a solution for doing something inbetween the events, but I can't get the x and y to work correctly. I'm trying to use mousemove() to get it, but mousemove() doesn't stop when the function ends. And having the function that get's the x and y call its self gets me an infinite loop. So... two things, how to continuously get the x and y's and how to avoid the infinite loop. I know how to put it into an array and make a squiggly line after, just not how to do the mouse listener. The code I have now is:

var paper = new Raphael($('#canvas')[0], 500, 500);
var canvas =$('#canvas');

var stillDown = false;
canvas.mousedown(function(){
    console.log("down");
    stillDown = true;
    whileDown();
});

function whileDown(){
    if(!stillDown){return;}else{
    console.log("Still in down.");
        canvas.mousemove(function(e){
        //console.log("X: " + e.offsetX + " Y: " + e.offsetY);
    });
    whileDown();
    }
}

canvas.mouseup(function(){
    stillDown = false;
});

My current goal is just to have it display that it's down, all the x and y's while down, and that it's up, and nothing after that, in the console. Then I'll process that info. Anyways, any help would be great!

bfavaretto bfavaretto · Accepted Answer · 2013-04-03T04:08:55

On mousedown, just set the boolean flag:

var stillDown = false;
canvas.mousedown(function(){
    console.log("down");
    stillDown = true;
});

On mousemove, push the coordinates to an array if the flag is set:

var coords = [];
canvas.mousemove(function(e){
    if(!stillDown) return;
    console.log("moving");
    coords.push({x: e.offsetX, y: e.offsetY});
    // and/or do whatever you need with the coordinates  
}

On mouseup, unset the flag:

canvas.mouseup(function(){
    stillDown = false;
});

jQuery get all x and y between mousedown and mouseup

1 Answers