вместо задания события - поставить условие
Добрый день!
Подскажите, пожалуйста! Вопрос такой: нужно сделать рисование мышью (например в 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" без участия левой клавиши. |
вот здесь такая же проблема обсуждалась
http://javascript.ru/forum/jquery/30...tml#post195244 примеры рисования http://javascript.ru/forum/misc/2859...a-sobytie.html |
Есть ли вариант вообще отказаться от 'mousedown' и 'mouseup', заменив их на условия?
|
Цитата:
А что получилось с проверкой e.button==0? |
при этой проверке идет рисование так же как и без нее т.е. отрабатывание "mousemove" без участия левой клавиши. При e.button==1 рисование не работает.
|
Цитата:
|
Спасибо за информацию. Готовый код (рисование при нажатой левой клавише) для 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> |
Цитата:
<!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. |