Как я могу предотвратить быстрое движение мыши от разрыва линии в моем приложении для рисования?

Question

Я работаю над сценарием, который позволяет пользователю рисовать мышью: http://jsfiddle.net/ujMGu/

Проблема : Если вы перемещаете мышь очень быстро, она дергается и пропускает несколько мест. Есть ли способ захватить все точки, не пропуская черные пробелы между линией рисования?

CSS

#myid{background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: block;
    height: 1000px;
    margin: 3%;
    position: relative;
    text-indent: -1100px;}​

JS / JQ

$('#myid')
.css('position','relative')
.unbind().die()
.bind('mousemove mouseover',function (e){
var top = parseInt(e.pageY)-$(this).offset().top;
var left= parseInt(e.pageX)-$(this).offset().left;
var pixel= $('<div></div>')
  .css({
      width:10,height:10,
      background: '#fff',
      position:'absolute',
      top: top, left: left,
      'border-radius': 2
  });
  $(this).append(pixel);
});​

HTML

<div id="myid"></div>

Answer 1

Проверьте это: http://jsfiddle.net/KodeKreachor/9DbP3/6/

Следующий объект по данной ссылке содержит алгоритм:

var drawer = new Drawer();

Дайте мне знать, если у вас есть вопросы о том, как я это сделал. Предположение основано на строковом алгоритме Брезенхэма и должно быть совместимо с более старыми браузерами.

Answer 2

Вам нужно будет отслеживать предыдущую точку, а затем провести линию между новой точкой и предыдущей.

Answer 3

Как уже упоминал @kand, Canvas - действительно лучший инструмент для рисования.

Если вы должны использовать метод div или если это просто для удовольствия, вы можете расширить свой подход, сохранив предыдущую позицию мыши, а затем нарисовать промежуточные «пиксели», необходимые для завершения линии, например, используя Алгоритм Брезенхема .

Answer 4

Почему бы не использовать холст? Имеет ряд утилит для рисования линий:

http://www.w3schools.com/html5/html5_ref_canvas.asp