Omnimaga
General Discussion => Technology and Development => Web Programming and Design => Topic started by: Munchor on October 02, 2011, 03:15:42 pm
-
I have this function, that's called by onmousemove="checkmouse(event)"; in body.
function checkmouse(event)
{
var x = event.clientX - drawingCanvas.offsetLeft;
var y = event.clientY - drawingCanvas.offsetTop;
context.fillRect(x, y, 5, 5);
}
I was wondering how I can check if the mouse is both moving and down. I can do them separately (onmousemove or onmousedown), but not together. Do you have any ideas? Thanks.
-
You could try defining both window.onmousedown and and then defining window.onmousemove as well.
-
You could try defining both window.onmousedown and and then defining window.onmousemove as well.
function checkmouse(event)
{
window.onmousedown = mousedown;
function mousedown()
{
var x = event.clientX - drawingCanvas.offsetLeft;
var y = event.clientY - drawingCanvas.offsetTop;
context.fillRect(x, y, 5, 5);
}
}
I changed to this, it works, but there's an issue. I'm trying to make a mini drawing application, so I need it to work like MS Paint, when the mouse is down and moving it draws a line.
There's an issue though because it's not smooth this way, I have to keep releasing the mouse and pressing it again.
-
Define some variable to represent the state of the mouse as down or up, then make it "true" when mouseDown is triggered and "false" when mouseUp is triggered.
-
Define some variable to represent the state of the mouse as down or up, then make it "true" when mouseDown is triggered and "false" when mouseUp is triggered.
Yes, but when do I check if it's up or down?
-
Yes, but when do I check if it's up or down?
window.onmousemove
-
Yes, but when do I check if it's up or down?
window.onmousemove
You could try defining both window.onmousedown and and then defining window.onmousemove as well.
function checkmouse(event)
{
window.onmousedown = mousedown;
function mousedown()
{
var x = event.clientX - drawingCanvas.offsetLeft;
var y = event.clientY - drawingCanvas.offsetTop;
context.fillRect(x, y, 5, 5);
}
}
I changed to this, it works, but there's an issue. I'm trying to make a mini drawing application, so I need it to work like MS Paint, when the mouse is down and moving it draws a line.
There's an issue though because it's not smooth this way, I have to keep releasing the mouse and pressing it again.
-
Are you even returning false then?
When overriding an user event you need to return false to "cancel" the original effect, try that ;)
-
function checkmouse(event)
{
window.onmousedown = mousedown;
function mousedown()
{
var x = event.clientX - drawingCanvas.offsetLeft;
var y = event.clientY - drawingCanvas.offsetTop;
context.fillRect(x, y, 5, 5);
return false;
}
}
I tried that, I didn't know I had to return false; in order to cancel events when overriding them. However, this didn't work. Thanks!
-
Are you returning false on onmousemove? Cause I don't see mousemove in your code
Edit: So I've been trying to create what you were making, and came with this:
(It's not using canvas like you, but it should give you the general idea)
Moved here: http://ourl.ca/13341
-
var drawingCanvas = document.getElementById('mycanvas');
if (drawingCanvas.getContext)
{
var context = drawingCanvas.getContext('2d');
}
function main()
{
}
function checkmouse(event)
{
window.onmousedown = mousedown;
window.onmousemove = mousemove;
function mousemove()
{
return false;
}
function mousedown()
{
var x = event.clientX - drawingCanvas.offsetLeft;
var y = event.clientY - drawingCanvas.offsetTop;
context.fillRect(x, y, 5, 5);
}
}
I am now returning false on mouse move, but it still doesn't work smoothly. I will check your link right away.