Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   вместо задания события - поставить условие (https://javascript.ru/forum/events/30713-vmesto-zadaniya-sobytiya-postavit-uslovie.html)

eugen2002 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 13.08.2012 14:55

вот здесь такая же проблема обсуждалась
http://javascript.ru/forum/jquery/30...tml#post195244
примеры рисования
http://javascript.ru/forum/misc/2859...a-sobytie.html

eugen2002 13.08.2012 15:40

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

vadim5june 13.08.2012 15:42

Цитата:

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

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

eugen2002 13.08.2012 17:50

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

vadim5june 13.08.2012 18:31

Цитата:

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

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

eugen2002 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 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>


Часовой пояс GMT +3, время: 08:36.