Форум

eugen2002 · #1 (**permalink**) 13.08.2012, 14:34

Добрый день!
Подскажите, пожалуйста!
Вопрос такой:
нужно сделать рисование мышью (например в firefox 14.0.1), но использоваться должно только событие "mousemove", без использования "mousedown" и "mouseup". При этом "mousedown" и "mouseup" должны быть заменены на некое условие(или условия) включенное в "mousemove". Т.е. чтобы рисование в "mousemove" выполнялось только при нажатой левой клавише мыши. Пробовал поставить условие if ( e.button == 0 ) - не то
Код такой:
<html>
<head>
<title>Paint</title>
<body>
<canvas id="canvas" width="1000" height="800"> </canvas>
<script>
var x = 0;
var y = 0;

window.onload = function()
{
canvas.addEventListener('mousedown', mdown );
canvas.addEventListener('mousemove', mmove );
}

function mdown(e)
{
x = e.clientX;
y = e.clientY;
}

function mmove(e)
{
if ( e.button == 0 )
{
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(e.clientX,e.clientY);
ctx.stroke();
x = e.clientX;
y = e.clientY;
}
}

</script>
</body>
</html>

В таком варианте идет просто отрабатывание "mousemove" без участия левой клавиши.

vadim5june · #2 (**permalink**) 13.08.2012, 14:55

вот здесь такая же проблема обсуждалась
Останавливаем обработку события
примеры рисования
Проблема с постоянным откликом функции на событие

eugen2002 · #3 (**permalink**) 13.08.2012, 15:40

Есть ли вариант вообще отказаться от 'mousedown' и 'mouseup', заменив их на условия?

vadim5june · #4 (**permalink**) 13.08.2012, 15:42

Сообщение от eugen2002

Есть ли вариант вообще отказаться от 'mousedown' и 'mouseup', заменив их на условия?

я не представляю как это-Вы же должны знать когда юзер нажал на мышку
А что получилось с проверкой e.button==0?

eugen2002 · #5 (**permalink**) 13.08.2012, 17:50

при этой проверке идет рисование так же как и без нее т.е. отрабатывание "mousemove" без участия левой клавиши. При e.button==1 рисование не работает.

vadim5june · #6 (**permalink**) 13.08.2012, 18:31

Сообщение от eugen2002

при этой проверке идет рисование так же как и без нее т.е. отрабатывание "mousemove" без участия левой клавиши. При e.button==1 рисование не работает.

надо e.which==1 для всех браузеров кроме ие

eugen2002 · #7 (**permalink**) 14.08.2012, 01:05

Спасибо за информацию. Готовый код (рисование при нажатой левой клавише) для Chrome, в firefox - рисует без остановки, в ie = не работает

<html>
<head>
<title>Paint</title>
<body>
<canvas id="canvas" width="1000" height="800"> </canvas>
<script>
var x = 0;
var y = 0;

window.onload = function()
{
canvas.addEventListener('mousemove', mmove );
}

function mmove(e)
{
if ( e.which == 1 )
{
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(x, y);
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
x = e.clientX;
y = e.clientY;
}

</script>
</body>
</html>

vadim5june · #8 (**permalink**) 14.08.2012, 05:44

Сообщение от eugen2002

для Chrome

Для хрома можно добавить выбор цвета

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Paint</title>
<body>
<canvas id="canvas" width="500" height="120" style='border:1px solid black;'> </canvas><input type=color onchange=fcolor(this.value) >
<script>
var x = 0;
var y = 0;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');canvas.addEventListener('mousemove', mmove );
function fcolor(c){ctx.strokeStyle=c;};
function mmove(e)
{
if ( e.which == 1 )
{	
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(e.clientX, e.clientY);
ctx.closePath();
ctx.stroke();
}
x = e.clientX;
y = e.clientY;
}
</script>

Форум

Справочник

Discord чат

Курсы javascript