Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.08.2012, 14:34
Новичок на форуме
Отправить личное сообщение для eugen2002 Посмотреть профиль Найти все сообщения от eugen2002
 
Регистрация: 13.08.2012
Сообщений: 4

вместо задания события - поставить условие
Добрый день!
Подскажите, пожалуйста!
Вопрос такой:
нужно сделать рисование мышью (например в 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" без участия левой клавиши.
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2012, 14:55
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

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

Последний раз редактировалось vadim5june, 13.08.2012 в 15:03.
Ответить с цитированием
  #3 (permalink)  
Старый 13.08.2012, 15:40
Новичок на форуме
Отправить личное сообщение для eugen2002 Посмотреть профиль Найти все сообщения от eugen2002
 
Регистрация: 13.08.2012
Сообщений: 4

Есть ли вариант вообще отказаться от 'mousedown' и 'mouseup', заменив их на условия?
Ответить с цитированием
  #4 (permalink)  
Старый 13.08.2012, 15:42
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от eugen2002 Посмотреть сообщение
Есть ли вариант вообще отказаться от 'mousedown' и 'mouseup', заменив их на условия?
я не представляю как это-Вы же должны знать когда юзер нажал на мышку
А что получилось с проверкой e.button==0?

Последний раз редактировалось vadim5june, 13.08.2012 в 15:50.
Ответить с цитированием
  #5 (permalink)  
Старый 13.08.2012, 17:50
Новичок на форуме
Отправить личное сообщение для eugen2002 Посмотреть профиль Найти все сообщения от eugen2002
 
Регистрация: 13.08.2012
Сообщений: 4

при этой проверке идет рисование так же как и без нее т.е. отрабатывание "mousemove" без участия левой клавиши. При e.button==1 рисование не работает.
Ответить с цитированием
  #6 (permalink)  
Старый 13.08.2012, 18:31
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от eugen2002 Посмотреть сообщение
при этой проверке идет рисование так же как и без нее т.е. отрабатывание "mousemove" без участия левой клавиши. При e.button==1 рисование не работает.
надо e.which==1 для всех браузеров кроме ие
Ответить с цитированием
  #7 (permalink)  
Старый 14.08.2012, 01:05
Новичок на форуме
Отправить личное сообщение для eugen2002 Посмотреть профиль Найти все сообщения от eugen2002
 
Регистрация: 13.08.2012
Сообщений: 4

Спасибо за информацию. Готовый код (рисование при нажатой левой клавише) для 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>

Последний раз редактировалось eugen2002, 14.08.2012 в 01:39.
Ответить с цитированием
  #8 (permalink)  
Старый 14.08.2012, 05:44
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как поставить обработчик события на загрузку страницы? mister_maxim Events/DOM/Window 7 17.05.2011 21:22
Немогу поставить условие, запутался nemo Серверные языки и технологии 1 30.01.2010 14:18